1. ホーム
  2. 質問と答え
  3. チェックボックスの選択可能なチェックボックスを制限する方法は？ここ

チェックボックスの選択可能なチェックボックスを制限する方法は？ここ

2017-11-07 25 views
0

は、ここで私はそれがwork.Iが2チェックボックスの選択可能なチェックボックスを制限する方法は？ここ

で選択可能なチェックボックスを制限しようとしていますdoesntのか、これまでにコンパイルされ、ここできたコードjavascriptのコード

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

がHTML

です

https://codepaste.net/dp68y1

出典

2017-11-07 allstar

+0

は、あなたが探している[この]（https://www.htmlgoodies.com/tutorials/forms/article.php/3479181）とは何ですか？ – Granny

答えて

0

チェックボックスのように見えるのは、直接的な兄弟ではありません。この問題を簡単に解決するには、name属性セレクタを使用するだけです。以下の作業例を参照してください。

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>

出典

2017-11-07 12:36:01 Nick

+0

私はhtmlに何かを追加できません。自動的に来ますこの行を追加せずにそれを行う方法はありますか？ – allstar

+0

@allstarその行を追加する必要はありません。私はこのスニペットでjqueryを使うことができました。すでにjqueryをインポートしています。 （あなたが作る必要がある唯一の変更は、あなたのJavaScriptにあります）。 – Nick

+0

しかし、それはその行なしで動作しません。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 />

出典

2017-11-07 12:37:21

+0

私は何かをhtmlに追加することはできません。自動的に来ますこの行を追加せずにそれを行う方法はありますか？ – allstar

0

これらのチェックボックスは、それぞれの兄弟が、多くはこの

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>
のようなページでチェックされOWあなたがチェックすることができother.Insteadではありません

出典

2017-11-07 12:39:09

+0

htmlに何かを追加できません。自動的に表示されますこの行を追加することなくそれを行う方法？ – allstar

+0

コードに追加する必要はありません。すでにインポート済みです。私はスニペットのためにそれを追加しました –

0

使用このコード

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; 
     } 
    });

出典

2017-11-07 12:39:41 PriME

関連する問題

 関連する問題