如何确保只有一个复选框保持选中状态？

Question

我有一些带有复选框的 HTML（由于生成 HTML 的库，使用单选按钮不方便 - 要添加详细信息，我需要自己在库之外破解一个，或者找到一种非常规的方法来制作图书馆为我工作）。

我需要模拟单选按钮功能，特别是 - 在选中许多其他框时，所有其他盒子都应不选中。

我正在尝试取消选中所有框，然后选中我单击的那个。我的 jQuery/JS 失败了。你能帮忙吗？

$(function() {
  //check first box
  $("input.duty:first").attr("checked", "true");

  //clicking unchecked box should check that box
  //unchecks all others
  $(".duty").on('click', function(event) {
    $("input.duty").attr("checked", "false");
    $(this).prop("checked", true);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="casePointsFieldset">
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">

    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
</div>

Answer 1

• 在所有情况下都使用.prop，而不是混合使用.prop/.attr。
• 使用true 和false 而不是字符串。

更新了sn-p：

$(function() {
  //check first box
  $("input.duty:first").prop("checked", true);

  //clicking unchecked box should check that box
  //unchecks all others
  $(".duty").on('click', function(event) {
    $("input.duty").prop("checked", false);
    $(this).prop("checked", true);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="casePointsFieldset">
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">

    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label><span>Duty:</span>
                        <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0"></label>
    </div>
  </fieldset>
</div>

Answer 2

实现此目的的最简单方法是在单击所有其他复选框时调用prop('checked', false)，如下所示：

$(".duty").first().prop('checked', true).end().on('click', function(event) {
  $('.duty').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="casePointsFieldset">
  <fieldset class="casePointFieldset">
    <div>
      <label>
        <span>Duty:</span>
        <input type="checkbox" name="casePoints[0][isDutyPoint]" class="duty" value="0">
      </label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label>
        <span>Duty:</span>
        <input type="checkbox" name="casePoints[1][isDutyPoint]" class="duty" value="0">
      </label>
    </div>
  </fieldset>
  <fieldset class="casePointFieldset">
    <div>
      <label>
        <span>Duty:</span>
        <input type="checkbox" name="casePoints[2][isDutyPoint]" class="duty" value="0">
      </label>
    </div>
  </fieldset>
</div>

Answer 3

尝试将检查属性设置为布尔值false，而不是字符串"false"。

使用字符串会被解释为true。

$("input.duty").attr("checked", false);

Answer 4

如果您只需要一个复选框，则应考虑单选按钮。

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/radio

这应该更适合用例。如果您在实施方面需要任何帮助，请告诉我。

我知道您说单选很难是因为您的用例，但您应该认真考虑使用单选按钮功能扩展您的库。从 HTML 的角度来看，它更正确，从 UI/UX 的角度来看也是如此。