Need to grey out a question (having radio button as answer) in HTML/JS application?

user_7382881 0
Viewed 51

I am trying to grey out the question and there multiple answer using a single click button. I have used below code but it is not working nothing happen after I click NA.

HTML:

$("#na").click(function() {
   $(".question1").attr('disabled',true); 
});
<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>Question 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) Business leaders demonstrate. effective sponsorship for new ways of working</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>
    <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>

    <div class="form-group">
    <input type="button" name="disable1" id = "na" value="N/A"  />
</div>

Please check the code and help me to resolve the issue.

html jquery javascript
2 Answers

Your code currently adds the disabled attribute to a div, which doesn't do anything.

If you want to disable the children inputs, just change your selector to .question1 input which selects all inputs that are children of divs with the question1 class:

$("#na").click(function() {
  $(".question1 input").attr('disabled', true);
});
<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>Question 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) Business leaders demonstrate. effective sponsorship for new ways of working</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>
        <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 class="form-group">
            <input type="button" name="disable1" id="na" value="N/A" />
          </div>

user_142512210

You just disable the div! You need to disable all element in the question1 with below code:

$(".question1").find('*').attr('disabled', true);


$("#na").click(function () {
            $(".question1").find('*').attr('disabled', true);
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
 
<div class="section-1-questions">
        <div style="background-color:greenyellow;"> <b>Question 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) Business leaders demonstrate. effective sponsorship for new ways of working</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>
                    <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>
            </div>
        </fieldset>
    </div>
    <div class="form-group">
        <input type="button" name="disable1" id="na" value="N/A" />
    </div>

user_113590760
Related