How to put condition on questions to grey out (having questions in HTML with radio button answer ) using NA button for each question?
Question
I have created one HTML/JS application in which i have created 5 questions with radio button answer.i have given user to do click NA for not applicable questions.but i want to put condition that user only able to grey out 3 questions.Not more than that here i am confused how to do it.below is the code.Also i have put Next button with condition so each question which is not grey out should be answer :-
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">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" >
<label class="form-check-label" for="gridRadios1">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios4" value="4">
<label class="form-check-label" for="gridRadios4">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios5" value="5">
<label class="form-check-label" for="gridRadios5">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q1Remark" value="Remark" onclick="onButtonClick(1)" />
<input class="hide" type="text" id="textInput1" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<input type="button" name="disable1" id = "na1" value="N/A"/>
</div>
</div></div>
</div>
{{!-- <input type="button" id="remarks" value="Remarks" /> --}}
</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">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="1">
<label class="form-check-label" for="gridRadios6">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios7" value="2">
<label class="form-check-label" for="gridRadios7">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios8" value="3">
<label class="form-check-label" for="gridRadios8">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios9" value="4">
<label class="form-check-label" for="gridRadios9">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios10" value="5">
<label class="form-check-label" for="gridRadios10">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q2Remark" value="Remark" onclick="onButtonClick(2)" />
<input class="hide" type="text" id="textInput2" value="" />
</div>
</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">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios11" value="1">
<label class="form-check-label" for="gridRadios11">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input " type="radio" name="question3" id="gridRadios12" value="2">
<label class="form-check-label" for="gridRadios12">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios13" value="3">
<label class="form-check-label" for="gridRadios13">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios14" value="4">
<label class="form-check-label" for="gridRadios14">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios15" value="5">
<label class="form-check-label" for="gridRadios15">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q3Remark" value="Remark" onclick="onButtonClick(3)" />
<input class="hide" type="text" id="textInput3" value="" />
</div>
</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">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios19" value="4">
<label class="form-check-label" for="gridRadios19">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios20" value="5">
<label class="form-check-label" for="gridRadios20">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q4Remark" value="Remark" onclick="onButtonClick(4)" />
<input class="hide" type="text" id="textInput4" value="" />
</div>
</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">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios21" value="1">
<label class="form-check-label" for="gridRadios21">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios22" value="2">
<label class="form-check-label" for="gridRadios22">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios23" value="3">
<label class="form-check-label" for="gridRadios23">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios24" value="4">
<label class="form-check-label" for="gridRadios24">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios25" value="5">
<label class="form-check-label" for="gridRadios25">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q5Remark" value="Remark" onclick="onButtonClick(5)" />
<input class="hide" type="text" id="textInput5" value="" />
</div>
</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>
JS :-
$(document).ready(function () {
$("#na1").click(function() {
console.log("na is working");
$(".question1 input").attr('disabled', true);
})
});
$('.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');
}});
2 answers
solution1
1 2021-07-19 05:06:08
You want to use the disabled html attribute along with the jquery prop function.
$(".class").prop( "disabled", true );
It's important to note that using disabled and required on the same element can cause problems for users. This is because they won't be able to submit the form because a input is disabled, preventing input, but it's also required.
EDIT
You'll want to define a "counter" variable var disableCount = 0; which will increment every time a question is disabled. Once the counter variable is incremented three times. The click function should 1 Stop incrementing the counter and 2 stop disabling questions. Something like this should work:
var disableCount = 0;
$("#na1").click(function() {
if(disableCount >= 3) return;
console.log("na is working");
$(".question1 input").attr('disabled', true);
disableCount++;
});
solution2
1 ACCPTED 2021-07-19 05:28:50
As each question has identical information, why not do it once and repeat.
For the NA button, we just add a class onto the enclosing div which helps us with styling and also gives us a selector to test for legnth. When it's over 3 we prevent it from continuing.
Sorry I changed the code, but hopefully this will give you some insight on how to make your code more lean, managable and responsive. Now if you want to update the answers, you can do it once and it works for them all.
$(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'); } });
.answers.disabled { opacity: .5; }
<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.
Related Question
Need to grey out a question (having radio button as answer) in HTML/JS application?
Dynamically render a set of questions(received as API response), along with a text field and radio button under each question
How To Loop Through Radio Questions Back Button Javascript
How to grey out checkbox unless radio button is selected?
Click selector for multiple radio button questions
Automatically creating the desirable number of radio button questions
Radio button condition in html
enable submit button only if radio button in all questions are selected jquery
Vue multiple questions, with each question having multiple options
How can create next and previous button's to select questions in a quiz using an array to store the questions which are objects?
Related Tags