Javascript 复选框选择的限制

你好！我目前有这个代码，但它不工作，我仍然可以选择2个以上，即使我限制它最多选择2个项目。代码如下：

$（文档）.ready（函数（）{
var限值=2；
$（'input.single checkbox'）。打开（'change'，函数（evt）{
if（$（this）.sides（':checked'）。长度>=限制）{
此项检查=错误；
}
});
});

现有书籍
name='accession\'u no[]'value=''aria label=“…”>
-

首先请注意，PHP代码将生成的HTML无效。您有将被复制的
id
属性，而且
标签
元素需要包装每个
，而不是全部。这里有一个固定版本：

<?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;?>


现有书籍
标题#1-作者#1

标题#2-作者#2

标题#3-作者#3

参考此选项，您可以找到一种方法来限制所选复选框的数量，如果这是您正在搜索的内容

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>

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


现有书籍
您的代码片段可能不需要考虑，而不是选中选中的框（如果选中了多于两个），当选择了两个时，通过添加禁用的Atter -<代码> <代码>禁用所有其他内容，然后当计数下降到两个以下时，删除它们。我认为这是一种更优雅和用户友好的方式。希望这能起作用，对于测试，您可以使用我的测试代码，然后您也可以使用您的foreach代码
<script>
$(document).ready(function() {
var limit = 2;

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