将可选择的复选框数量限制为三个(不包括一个）

Restricting the number of checkboxes that can be selected to three excluding one

本文关键字：不包括 一个 三个 复选框 可选择      更新时间：2023-09-26

我试图将可以选择的复选框数量限制为3。下面的代码有效，但我希望级别6和级别7始终是可选的，即如果有些人选择1、2、3，那么6和7应该仍然是可选的。

HTML:

 <div class="pricing-levels-3">
      <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
      <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
      <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
      <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
      <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
      <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
      <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
      <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
    </div>

jQuery

$('input[type=checkbox]').change(function(e){
if ($('input[type=checkbox]:checked').length > 3) {
    $(this).prop('checked', false)
    alert("allowed only 3");
}
})

Fiddle:

试试这个，添加一个类到始终可选择的复选框

$('input[type=checkbox]').change(function(e){
   if ($('input[type=checkbox]:checked').not('.selectable').length > 3) {
        $(this).prop('checked', false)
        alert("allowed only 3 main check boxes selectable");
   }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-levels-3">
          <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
          <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
          <input class="single-checkbox selectable" type="checkbox" name="vehicle" value="Bike">Level 6<br>
          <input class="single-checkbox  selectable" type="checkbox" name="vehicle" value="Bike">Level 7<br>
        </div>

最好设置一些类，让elemnts可选。也就是说，这将在您的情况下工作，使用jQuery:gt（）选择器：

if ($('input[type=checkbox]:not(:gt(4)):checked').length < 3)

-jsFiddle-

如果这是你想要选择的最后两个，请使用：

if ($('input[type=checkbox]:lt(-2):checked').length > 3)
相关文章：