jQuery：如何仅禁用复选框

Question

我正在使用我在网站上找到的以下代码，它运行良好。

我有一个由单选按钮和复选框组成的 25 个问题测验。

如果在同一个页面上我同时有单选按钮和复选框，就会出现问题。下面的代码计算了这两个，但我只希望它计算勾选的复选框。

• 目前，一旦我达到最大答案，我就无法回答剩余的单选按钮问题；反之亦然，复选框前的单选按钮计入最大答案数。
• 该代码还禁用了单选按钮和复选框，因此我想找到一种方法使其仅禁用复选框。

我可以将代码拆分成更多的 div，但这会变得非常复杂，因为我的 jQuery 使用 div 控制测验的流程：

$(document).ready(function () {
  $("input[type=checkbox]").click(function (e) {
    if ($(e.currentTarget).closest("div.question").length > 0) {
      disableInputs($(e.currentTarget).closest("div.question")[0]);        
    }
  });
});

function disableInputs(questionElement) {
  console.log(questionElement);
  if ($(questionElement).data('max-answers') == undefined) {
    return true;
  } else {
    maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
    if ($(questionElement).find(":checked").length >= maxAnswers) {
      $(questionElement).find(":not(:checked)").attr("disabled", true);
    } else {
      $(questionElement).find("input[type=checkbox]").attr("disabled", false);
    }
  }
}

这是主要测验的 sn-p：

<div class="Q8 question" data-max-answers="3">
  <h2>Access Control Questions</h2><br>

  <strong>Is it ok to share the door access code?</strong><br>
  <input type="radio" id="ac1" name="access1" value="0">Yes<br>
  <input type="radio" id="ac2" name="access1" value="1">No<br><br>
  <br><strong><label for="access1">From the list below select those that are the aims of an Access Control System (Maximum of 3) </strong></span></label><br>
  <input type="checkbox" id="ac3" name="access"  value="1" /> To ensure only authorised users have access to our systems</p>
  <input type="checkbox" id="ac4" name="access"  value="1" /> To protect physical access to our offices</p>
  <input type="checkbox" id="ac4a" name="access" value="0" /> To give you access to other users passwords</p>
  <input type="checkbox" id="ac5" name="access"  value="1" /> To ensure users have access to systems they require access too</p>

  <br><strong>A client is visiting and asks to use your computer, what should you do?</strong><br>
  <input type="radio" id="ac6" name="access5" value="0">Let them use your computer because they are a client so can do what they wish<br>
  <input type="radio" id="ac7" name="access5" value="1">Politely say you are not allowed to do that and refer them to the manager they have come to visit<br>
  <input type="radio" id="ac8" name="access5" value="0">Pretend to be on a call and hope they go away<br><br>
</div>

<div class="Q8a">
  <input id="Q8PrevBut" type="button" Value="Back"> 
  <input id="Q8NextBut" type="button" Value="Next"> 
</div>

Answer 1

我认为:not(:checked) 同时返回单选按钮和复选框。您可以尝试通过添加input[type=checkbox] 使选择器更具体，见下文：

if ($(questionElement).find("input[type=checkbox]:checked").length >= maxAnswers)

...禁用复选框时执行相同操作：

$(questionElement).find("input[type=checkbox]:not(:checked)").attr("disabled", true);