JQuery - 允许选择特定的 2 个复选框

Question

I only want 1 checkbox to be selected - UNLESS its checkbox 3 AND 4 - then I want to allow these 2 checkboxes to be selected. This is the only time I want 2 checkboxes allowed.

I have a working example of only allowing 1 checkbox. see the jsfiddle... https://jsfiddle.net/rbla/s1setkfe/3/

I need to allow #3 and #4 to be selected

 $(function() { $('#submit').click(function() { checked = $("input[type=checkbox]:checked").length; if (!checked) { alert("You must check at least one reason."); return false; } }); }); // No more than 1 checkbox allowed var limit = 1; $('input.sing-chbx').on('change', function(evt) { if ($("input[name='choice[]']:checked").length > limit) { this.checked = false; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" name="formname" method="post" autocomplete="off" id="update"> <div class="group" style="margin:0.5em 0;"> <div> <div id="one"> <input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01"> <label>One</label><br/> </div> <div id="two"> <input type="checkbox" class="sing-chbx" name="choice[]" value="02"> <label>Two</label><br/> </div> <div id="three"> <input type="checkbox" class="sing-chbx" name="choice[]" value="03"> <label>Three</label><br/> </div> <div id="four"> <input type="checkbox" class="sing-chbx" name="choice[]" value="04"> <label>Four</label><br/> </div> <div id="five"> <input type="checkbox" class="sing-chbx" name="choice[]" value="05"> <label>Five</label><br/> </div> </div> </div> <input type="submit" id="submit" value="Confirm Submission"> </form>

Answer 1

I have created a fiddle for you demonstrating my solution.

I changed the way you're handling this to be more visual to the user with what is happening by actually disabling the other checkboxes.

I added new classes to all of the checkboxes that only allow one selection, and added a separate class to the checkboxes that allow two selections.

After that you just need to check the class of the clicked checkbox, and disable the others depending on whether or not it was a select-one or select-two checkbox:

var canOnlySelectOne = $(this).hasClass("select-one");

if (canOnlySelectOne) {
    $(".sing-chbx").not(this).attr("disabled", this.checked);
} else if ($(this).hasClass("select-two")) {
    if ($(".select-two:checked").length > 0) {
       $(".select-one").attr("disabled", true);
} else {
 $(".select-one").attr("disabled", this.checked);
}
}

We simply enable/disable the other checkboxes based on whether or not the clicked one ( this ) is checked or not. If the checkbox has a class of select-two then we check if any of the select-two checkboxes are checked, and act accordingly.

Answer 2

1. Instead of preventing user to check - just uncheck prev selection
2. You have 3 cases: 03 is clicked, 04 is clicked, something else clicked

Here is the updated code:

 $(function() { $('#submit').click(function() { checked = $("input[type=checkbox]:checked").length; if (!checked) { alert("You must check at least one reason."); return false; } }); }); // No more than 1 checkbox allowed except 3 & 4 $('input.sing-chbx').on('change', function(evt) { var me = $(this).val(); $('input.sing-chbx').each(function(ix){ var el = $(this); if(el.val()!= me) { if(me == "03") { // case 1: me == '03' - disable all but '04' if( el.val() != "04") { el.prop('checked', false); } } else if(me == "04") { // case 2: me == '04' - disable all but '03' if(el.val() != "03") { el.prop('checked', false); } } else { // otherwise disable all el.prop('checked', false); } } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" name="formname" method="post" autocomplete="off" id="update"> <div class="group" style="margin:0.5em 0;"> <div> <div id="one"> <input type="checkbox" class="sing-chbx" id="choice" name="choice[]" value="01"> <label>One</label><br/> </div> <div id="two"> <input type="checkbox" class="sing-chbx" name="choice[]" value="02"> <label>Two</label><br/> </div> <div id="three"> <input type="checkbox" class="sing-chbx" name="choice[]" value="03"> <label>Three</label><br/> </div> <div id="four"> <input type="checkbox" class="sing-chbx" name="choice[]" value="04"> <label>Four</label><br/> </div> <div id="five"> <input type="checkbox" class="sing-chbx" name="choice[]" value="05"> <label>Five</label><br/> </div> </div> </div> <input type="submit" id="submit" value="Confirm Submission"> </form>