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

Question

I have some HTML with checkboxes (using radio buttons is not convenient due to the library that generates the HTML - to add detail, I'd need to either hack one myself outside of the library or find an unconventional way to make the library work for me).

I need to simulate radio button functionality, in particular - when checking a single box out of many, all other boxes should be unchecked.

I am trying to uncheck all boxes, and then check the one that I clicked. My jQuery/JS is failing. Can you help?

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

The simplest way to achieve this is to call prop('checked', false) on all the other checkboxes when any one of them is clicked, like this:

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

• Use .prop in all cases rather than mix .prop / .attr .
• use true and false rather than strings.

Updated snippet:

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

If you only ever want one checkbox, you should consider radio buttons.

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

This should fit the use case better. Let me know if you need any help with implementation.

I know you say radios are hard because of your use case, but you should seriously consider extending your library with functionality for radio buttons. It is more correct from HTML standpoint as well as form a UI/UX standpoint.

Answer 4

Try to set the checked-property to the boolean false , not to the string "false" .

Using the string will be interpreted as true .

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