Question

美好的一天！我目前有这个代码，但它不工作，我仍然可以选择超过2，即使我限制它最多选择2项。这是代码：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Available Books</label>
  <div>
    <label>
      <?php foreach($collections as $collection):?>
       <input type="checkbox" id="blankCheckbox"  class="single-checkbox" <?php echo ($collection->book_status=='borrowed'? 'disabled':'')?> name='accession_no[]' value='<?php echo $collection->id ?>' aria-label="...">
       &nbsp;  
       <?php echo $collection->title ?> -  <?php echo $collection->author ?><br />
      <?php endforeach;?>
    </label>
  </div>
</div>

＆＃13;

Answer 1

引用此link Fiddle您可以找到一种方法来限制所选复选框的数量，如果这是您要搜索的内容

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

Answer 2

首先请注意，PHP代码生成的HTML无效。您有id个属性将被复制，label元素需要包装每个<input>，而不是所有这些属性。这是一个固定版本：

<?php foreach($collections as $collection):?>
  <label>
    <input type="checkbox"  class="single-checkbox" <?php echo ($collection->book_status=='borrowed'? 'disabled': '')?> name="accession_no[]" value="<?php echo $collection->id ?>" aria-label="...">
    &nbsp;  
    <?php echo $collection->title ?> - <?php echo $collection->author ?><br />
  </label>
<?php endforeach;?>

现在限制逻辑的问题是复选框元素不是彼此的兄弟，因此使用siblings()将始终返回0个元素的长度。要解决此问题，请直接按类选择元素以及:checked选择器。另请注意，要选择最多限额，检查应使用>，而不是>=。试试这个：

＆＃13;

$(document).ready(function() {
  var limit = 2;
  
  $('.single-checkbox').on('change', function(evt) {
    if ($('.single-checkbox:checked').length > limit) {
      this.checked = false;
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Available Books</label>
  <div>
    <label>
       <input type="checkbox" class="single-checkbox"  name='accession_no[]' value='1' aria-label="...">
       &nbsp;  
       Title #1 - Author #1<br />
    </label>
    
    <label>
       <input type="checkbox" class="single-checkbox"  name='accession_no[]' value='2' aria-label="...">
       &nbsp;  
       Title #2 - Author #2<br />
    </label>
    
    <label>
       <input type="checkbox" class="single-checkbox"  name='accession_no[]' value='3' aria-label="...">
       &nbsp;  
       Title #3 - Author #3<br />
    </label>
  </div>
</div>

＆＃13;

Answer 3

检查此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Available Books</label>
<div>
<label>

   <input type="checkbox" id="blankCheckbox"  class="single-checkbox" name='accession_no[]' value='1' aria-label="...">
   <input type="checkbox" id="blankCheckbox2"  class="single-checkbox" name='accession_no[]' value='1' aria-label="...">
   <input type="checkbox" id="blankCheckbox3"  class="single-checkbox" name='accession_no[]' value='1' aria-label="...">
   <input type="checkbox" id="blankCheckbox4"  class="single-checkbox" name='accession_no[]' value='1' aria-label="...">
   <input type="checkbox" id="blankCheckbox5"  class="single-checkbox" name='accession_no[]' value='1' aria-label="...">
   &nbsp;

</label>
</div>
</div>

这是您的原始代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="form-group">
 <label>Available Books</label>
 <div>
<?php
$i = 0;
foreach($collections as $collection):
    $i++;
    ?>
   <input type="checkbox" id="blankCheckbox_<?=$i?>"  class="single-checkbox" <?php echo ($collection->book_status=='borrowed'? 'disabled':'')?> name="accession_no[]" value="<?php echo $collection->id ?>" aria-label="...">
   &nbsp;
   <?php echo $collection->title ?> -  <?php echo $collection->author ?><br />
  <?php endforeach;?>
  </div>
  </div>

在下面添加此代码

<script>
$(document).ready(function() {
var limit = 2;

$('input.single-checkbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
  this.checked = false;
}
});
});
</script>

复选框选择限制

3 个答案: