复选框选择的限制

Question

美好的一天！我目前有此代码，但它不起作用，即使我将其限制为最多选择 2 个项目，我仍然可以选择 2 个以上。代码如下：

$(document).ready(function() {
  var limit = 2;
  
  $('input.single-checkbox').on('change', function(evt) {
    if ($(this).siblings(':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-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>

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 选择器。另请注意，要选择最大限制，检查应使用>，而不是>=。试试这个：

$(document).ready(function() {
  var limit = 2;
  
  $('.single-checkbox').on('change', function(evt) {
    if ($('.single-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-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>

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>