Question

我有一些动态复选框，我只选中了最多3个复选框。但是，如果选中了第四个复选框，则应将其跳过。并且还没有选中第四个复选框。我的问题是未选中所有复选框。

   $(document).ready(function(){
     $(":checkbox").change(function() {
     if(this.checked) {
    var numberOfChecked = $('input:checkbox:checked').length;
     if(numberOfChecked > 3 ){
       alert("Maxium Allowed 3 in Slider") ;
       $(":checkbox").prop("checked", false);
 return ;
    }
   }

        });
    });

我只需要检查3个复选框

  I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
  I have a car: <input type="checkbox" name="vehicle" value="Car"><br>

   I have a bus: <input type="checkbox" name="vehicle" value="Car"><br>

     I have a mobile: <input type="checkbox" name="vehicle" value="Car"><br>
  I have an airplane: <input type="checkbox" name="vehicle" value="Airplane">

Answer 1

使用this关键字来获取当前单击的复选框。

您所做的是根据选择器$（“：checkbox”）取消选中所有复选框

$(document).ready(function(){
     $(":checkbox").change(function() {
     if (this.checked) {
        var numberOfChecked = $('input:checkbox:checked').length;
        if (numberOfChecked > 3 ) {
            alert("Maximum Allowed 3 in Slider") ;
            //COMMENT: below line fixes your problem
            $(this).prop("checked", false);
            return ;
        }
      }
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
I have a car: <input type="checkbox" name="vehicle" value="Car"><br>
I have a bus: <input type="checkbox" name="vehicle" value="Car"><br>
I have a mobile: <input type="checkbox" name="vehicle" value="Car"><br>
I have an airplane: <input type="checkbox" name="vehicle" value="Airplane">

Answer 2

如果选中了第四个复选框，则您正在取消选中所有复选框， $（“：checkbox”）。prop（“ checked”，false）; 替换为$（this）.prop（“ checked”，false）;

$(document).ready(function(){
     $(":checkbox").change(function() {
     if(this.checked) {
    var numberOfChecked = $('input:checkbox:checked').length;
     if(numberOfChecked > 3 ){
       alert("Maxium Allowed 3 in Slider") ;
       $(this).prop('checked', false)
       return false;
    }
   }

        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
  I have a car: <input type="checkbox" name="vehicle" value="Car"><br>

   I have a bus: <input type="checkbox" name="vehicle" value="Car"><br>

     I have a mobile: <input type="checkbox" name="vehicle" value="Car"><br>
  I have an airplane: <input type="checkbox" name="vehicle" value="Airplane">

复选框选中为false仅选中复选框

2 个答案: