Question

这是我编译的代码，但它无法正常工作。我试图用2来限制可选复选框。

这里是javascript代码

sample = request_data.get('file')[:44].decode('base64')  # 33 bytes / 3 times 4 is 44 base64 chars
for tf in imghdr.tests:
    res = tf(sample, None)
    if res:
        break
print res

这是html

https://codepaste.net/dp68y1

Answer 1

看起来复选框不是直接的兄弟姐妹。解决此问题的一种简单方法是使用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>

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

这些复选框不是彼此的兄弟姐妹。相反，你可以查看很多在这样的页面中检查

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

使用此代码

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

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

4 个答案: