复选框选择的限制

Posted 2023-03-05

【中文标题】复选框选择的限制

【英文标题】：Limit of checkbox selection

【发布时间】：2017-07-20 14:03:11

【问题描述】：

美好的一天！我目前有此代码，但它不起作用，即使我将其限制为最多选择 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>

【问题讨论】：

你的代码 sn-p 不起作用

You might want to consider perhaps rather than unchecking the a checked box if more than two are selected, when two are selected, disabling all the others by adding a disabled attr - <input type="checkbox" disabled /> and then when the计数下降到两个以下，删除它们。我认为这更像是一种优雅且用户友好的方式。

【参考方案1】：

参考这个link Fiddle，你可以找到一种方法来限制选中复选框的数量，如果这是你正在搜索的内容

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

【参考方案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>

【参考方案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>

【讨论】：

希望这会起作用，为了测试你可以使用我的测试代码然后你也可以使用你的 foreach 代码