需要在 HTML/JS 应用程序中将问题（以单选按钮作为答案）灰显？

Question

我正在尝试使用单击按钮将问题和多个答案变灰。 我使用了以下代码，但单击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>

请检查代码并帮助我解决问题。

Answer 1

您的代码当前将disabled属性添加到div ，它没有做任何事情。

如果您想禁用子输入，只需将您的选择器更改为.question1 input ，它会选择作为question1类的div的所有子输入：

 $("#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>

Answer 2

您只需禁用 div！ 您需要使用以下代码禁用question1所有元素：

$(".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>