1. Zuhause
  2. Frage und Antwort
  3. Wie können Checkbox-Checkboxen begrenzt werden?

Wie können Checkbox-Checkboxen begrenzt werden?

2017-11-07 1 views
0

Hier ist der Code, den ich zusammengestellt haben, wie immer es tut work.I auswählbaren Kontrollkästchen mit 2.Wie können Checkbox-Checkboxen begrenzt werden?

und hier ist der JavaScript-Code

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

Hier ist der HTML

zu begrenzen versuche

https://codepaste.net/dp68y1

Quelle

2017-11-07 allstar

+0

Ist [diese] (https://www.htmlgoodies.com/tutorials/forms/article.php/3479181), was Sie suchen? – Granny

Antwort

0

Sieht so aus, als wären die Kontrollkästchen keine direkten Geschwister. Eine einfache Möglichkeit, dieses Problem zu beheben, wäre die Verwendung eines name Attributselektors. Siehe Arbeitsbeispiel unten.

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>

Quelle

2017-11-07 12:36:01 Nick

+0

Ich kann nicht etwas in HTML hinzufügen. Es kommt automatisch. Gibt es eine Möglichkeit, es zu tun, ohne diese Zeile hinzuzufügen? – allstar

+0

@allstar Sie müssen diese Zeile nicht hinzufügen, das war nur also könnte ich jquery in diesem Snippet verwenden. Sie haben jQuery bereits importiert. (Die einzige Änderung, die Sie vornehmen müssen, ist Ihr Javascript). – Nick

+0

Aber es funktioniert nicht ohne diese Zeile https://jsfiddle.net/4tppcjud/ – allstar

0 

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 />

Quelle

2017-11-07 12:37:21

+0

Ich kann nicht etwas in HTML hinzufügen. Es kommt automatisch Gibt es eine Möglichkeit, es ohne Hinzufügen dieser Zeile zu tun? – allstar

0

Diese Kontrollkästchen sind nicht die Geschwister jedes other.Instead können Sie überprüfen, ow viele sind in einer Seite wie dieser

geprüft 

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>

Quelle

2017-11-07 12:39:09

+0

Ich kann nicht etwas in HTML hinzufügen. Es kommt automatisch Möglichkeit, es zu tun, ohne diese Zeile hinzuzufügen? – allstar

+0

Sie müssen das nicht zu Ihrem Code hinzufügen. Sie haben es bereits importiert. Ich habe es nur für Snippet hinzugefügt –

0

Verwenden Sie diesen 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; 
     } 
    });

Quelle

2017-11-07 12:39:41 PriME

Verwandte Themen

 Verwandte Themen