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

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('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 2

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

更新的代码段：

$(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 3

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

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

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

我知道你说收音机很难，因为你的用例，但你应该认真考虑用单选按钮的功能扩展你的库。从 HTML 的观点和 UI/UX 的观点来看更正确。

Answer 4

尝试将 checked-属性设置为布尔值 false，而不是字符串 "false".

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

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

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

How to make sure only a single checkbox remains checked out of many?

html

javascript

jquery

jquery-selectors