如何限制复选框的可选复选框？

Question

Here is the code that I have compiled how ever it doesnt work.I am trying to limit selectable checkboxes with 2.

and here is the javascript code

 var limit = 2;
    $('input.civicrm-enabled.form-checkbox').on('change', function(evt) {
       if($(this).siblings(':checked').length >= limit) {
           this.checked = false;
       }
    });

Here is the html

https://codepaste.net/dp68y1

Answer 1

Looks like the checkboxes aren't direct siblings. An easy way to correct this issue would be to just use a name attribute selector. See working example below.

 var limit = 2; $("[name^='submitted[civicrm_1_contact_1_cg24_custom_486]']").on('change', function(evt) { if($("[name^='submitted[civicrm_1_contact_1_cg24_custom_486]']:checked").length > limit) { this.checked = false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-item webform-component webform-component-checkboxes webform-component--civicrm-1-contact-1-cg24-custom-486"> <label for="edit-submitted-civicrm-1-contact-1-cg24-custom-486">Which......?</label> <div class="form-checkboxes civicrm-enabled" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486"> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-1"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-1" name="submitted[civicrm_1_contact_1_cg24_custom_486][1]" type="checkbox" value="1"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-1">F</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-2"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-2" name="submitted[civicrm_1_contact_1_cg24_custom_486][2]" type="checkbox" value="2"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-2">A</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-3"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-3" name="submitted[civicrm_1_contact_1_cg24_custom_486][3]" type="checkbox" value="3"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-3">B</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-4"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-4" name="submitted[civicrm_1_contact_1_cg24_custom_486][4]" type="checkbox" value="4"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-4">T</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-5"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-5" name="submitted[civicrm_1_contact_1_cg24_custom_486][5]" type="checkbox" value="5"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-5">L</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-6"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-6" name="submitted[civicrm_1_contact_1_cg24_custom_486][6]" type="checkbox" value="6"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-6">W</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-7"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-7" name="submitted[civicrm_1_contact_1_cg24_custom_486][7]" type="checkbox" value="7"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-7">R</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-8"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-8" name="submitted[civicrm_1_contact_1_cg24_custom_486][8]" type="checkbox" value="8"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-8">B</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-9"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-9" name="submitted[civicrm_1_contact_1_cg24_custom_486][9]" type="checkbox" value="9"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-9">H</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-10"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-10" name="submitted[civicrm_1_contact_1_cg24_custom_486][10]" type="checkbox" value="10"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-10">I</label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-11"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-11" name="submitted[civicrm_1_contact_1_cg24_custom_486][11]" type="checkbox" value="11"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-11">a</label> </div> </div> </div> 

Answer 2

 jQuery(function(){ var max = 2; var checkboxes = jQuery('input[type="checkbox"]'); checkboxes.click(function(){ var $this = $(this); var set = checkboxes.filter('[name="'+ this.name +'"]') var current = set.filter(':checked').length; return current <= max; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Checkboxes for Cat 1 - Max of Three in Category --> <input type="checkbox" value="Option 1" id="CAT_Custom_365571_0" name="CAT_Custom_365571" />Creative<br /> <input type="checkbox" value="Option 2" id="CAT_Custom_365571_1" name="CAT_Custom_365571" />Euphoric<br /> <input type="checkbox" value="Option 3" id="CAT_Custom_365571_2" name="CAT_Custom_365571" />Uplifted<br /> <input type="checkbox" value="Option 3" id="CAT_Custom_365571_3" name="CAT_Custom_365571" />Uplifted<br /> <input type="checkbox" value="Option 3" id="CAT_Custom_365571_4" name="CAT_Custom_365571" />Uplifted<br /> 

Answer 3

These checkboxes are not the siblings of each other.Instead you can check ow many are checked in a page like this

 var limit = 2; $('input.civicrm-enabled.form-checkbox').on('change', function(evt) { if($('input[type="checkbox"]:checked').length > limit) { this.checked = false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-item webform-component webform-component-checkboxes webform-component--civicrm-1-contact-1-cg24-custom-486"> <label for="edit-submitted-civicrm-1-contact-1-cg24-custom-486">Which......? </label> <div id="edit-submitted-civicrm-1-contact-1-cg24-custom-486" class="form-checkboxes civicrm-enabled"><div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-1"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-1" name="submitted[civicrm_1_contact_1_cg24_custom_486][1]" value="1" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-1">F </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-2"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-2" name="submitted[civicrm_1_contact_1_cg24_custom_486][2]" value="2" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-2">A </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-3"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-3" name="submitted[civicrm_1_contact_1_cg24_custom_486][3]" value="3" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-3">B </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-4"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-4" name="submitted[civicrm_1_contact_1_cg24_custom_486][4]" value="4" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-4">T </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-5"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-5" name="submitted[civicrm_1_contact_1_cg24_custom_486][5]" value="5" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-5">L </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-6"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-6" name="submitted[civicrm_1_contact_1_cg24_custom_486][6]" value="6" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-6">W </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-7"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-7" name="submitted[civicrm_1_contact_1_cg24_custom_486][7]" value="7" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-7">R </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-8"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-8" name="submitted[civicrm_1_contact_1_cg24_custom_486][8]" value="8" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-8">B </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-9"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-9" name="submitted[civicrm_1_contact_1_cg24_custom_486][9]" value="9" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-9">H </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-10"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-10" name="submitted[civicrm_1_contact_1_cg24_custom_486][10]" value="10" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-10">I </label> </div> <div class="form-item form-type-checkbox form-item-submitted-civicrm-1-contact-1-cg24-custom-486-11"> <input class="civicrm-enabled form-checkbox" id="edit-submitted-civicrm-1-contact-1-cg24-custom-486-11" name="submitted[civicrm_1_contact_1_cg24_custom_486][11]" value="11" type="checkbox"> <label class="option" for="edit-submitted-civicrm-1-contact-1-cg24-custom-486-11">a </label> </div> </div> </div> 

Answer 4

Use this code

var limit = 2;
    $('input.civicrm-enabled.form-checkbox').on('change', function(evt) {
    debugger
       if($('input.civicrm-enabled.form-checkbox:checked').length > limit) {
           this.checked = false;
       }
    });