I have written a code for NA button in which it disable the question after click.But if user click it by mistake i am not able to make it enable after 2nd click.
Below is the code for button.
$(".btn-na").click(function() {
let n = $('.answers.disabled').length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', true);
$(this).closest('.answers').addClass('disabled')
})
});
Above is the Jquery i have written for this.
JS:-
$(document).ready(function() {
let ctr = 1;
$('.answers').each(function(index) {
let i = index + 1
let html = ` <div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
<label class="form-check-label" for="gridRadios${ctr}"> Never</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
<label class="form-check-label" for="gridRadios${ctr}">Rarely</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
<label class="form-check-label" for="gridRadios${ctr}">Occasionally</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
<label class="form-check-label" for="gridRadios${ctr}">Often</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
<label class="form-check-label" for="gridRadios${ctr}">Always</label>
</div>
<div class="form-group">
<input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
<input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<button name="disable${i}" id="na${i}" class='btn-na'>N/A</button>
</div>
`
$(this).html(html);
ctr++;
})
$(".btn-na").click(function() {
let n = $('.answers.disabled').length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', true);
$(this).closest('.answers').addClass('disabled')
})
});
$('.btnNextS1').click(function() {
if ($('div.row1:not(:has(:radio:checked))').length) {
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
} else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}
});
HTML:-
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class="question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious">Previous</a>
<a class="btn btn-primary btnNextS1">Next</a>
</div>
I've would change 2 things reguarding this problem.
1: $('.answers.disabled').not($(this).closest('.answers')).length
^this counts all .answers
that is disabled, but not the one you click on. That will ensure that we can enable the input if it's disabled.
2: $(this).closest('.answers').find("input").attr('disabled', .$(this).closest('.answers').find("input"):is(";disabled")). $(this).closest('.answers').toggleClass('disabled')
$(this).closest('.answers').find("input").attr('disabled', .$(this).closest('.answers').find("input"):is(";disabled")). $(this).closest('.answers').toggleClass('disabled')
^This will switch between disabled and enabled based on if it's disabled or ntoe.
Result
$(".btn-na").click(function() {
let n = $('.answers.disabled').not($(this).closest('.answers')).length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', !$(this).closest('.answers').find("input").is(":disabled"));
$(this).closest('.answers').toggleClass('disabled')
})
Demo
$(document).ready(function() { let ctr = 1; $('.answers').each(function(index) { let i = index + 1 let html = `<div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1"> <label class="form-check-label" for="gridRadios${ctr}"> Never</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2"> <label class="form-check-label" for="gridRadios${ctr}">Rarely</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3"> <label class="form-check-label" for="gridRadios${ctr}">Occasionally</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4"> <label class="form-check-label" for="gridRadios${ctr}">Often</label> </div> <div class="form-check-inline section-1"> <input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5"> <label class="form-check-label" for="gridRadios${ctr}">Always</label> </div> <div class="form-group"> <input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" /> <input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" /> <p>Remaining Characters: <span id="chars-left">100</span></p> </div> <div class="form-group"> <button name="disable${i}" id="na${i}" class='btn-na'>N/A</button> </div>` $(this).html(html); ctr++; }) $(".btn-na").click(function() { let n = $('.answers.disabled').not($(this).closest('.answers')).length if (n >= 3) { alert('You can only disable 3'); return } $(this).closest('.answers').find("input").attr('disabled', .$(this).closest('.answers').find("input"):is(";disabled")). $(this).closest('.answers').toggleClass('disabled') }) $('.btnNextS1').click(function() { $("div.row1").each(function() { $(this).parent().next(".validation").remove() if ($(this):has("input.checked").length > 0) {} else { $(this).parent():after("<div class='validation' style='color;red:margin-bottom; 20px;'>Please Answer this question</div>"). } }) if ($("div.row1").filter(function() { return $(this).parent().next().hasClass("validation") }).length == 0) { //e;stopPropagation(). console;log('valid'). $('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a');trigger('click'); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="section-1-questions"> <div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br> <fieldset class="form-group"> <div class="row1"> <div class="question1"> <legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend> <div class="col-sm-10 answers"> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row1"> <legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend> <div class="col-sm-10 answers"> </div> </div> </fieldset> <div class="form-group"> <label for="remarks"><b>Remarks / Observations </b></label> <input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations"> <small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small> </div> </div> <br> <a class="btn btn-primary btnPrevious">Previous</a> <a class="btn btn-primary btnNextS1">Next</a> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.