限制已选中复选框的数量

Question

由于我设计了自定义复选框，我想限制复选框。我可以轻松地为默认复选框添加限制，但在我的情况下，由于我自己的设计而无法正常工作。我不知道自定义复选框选择限制。请帮我脱掉它。

＆＃13;

$(document).ready(function(){
  $('.btcp-multi-lst').on('change', function(evt) {
    if ($('input').is(':checked').length >= 3) {
      this.checked = false;
    };
  });
});

＆＃13;

.checkbox{
  padding-left: 20px;
}
.checkbox>label {
    display: inline-block;
    position: relative;
    padding-left: 5px; 
    color: #686868;
    padding-top: 2px;
    min-height: 25px;
    font-family: 'montserrat';
}
.checkbox>span{
  padding-right: 17px;
  padding-top: 3px;
  font-family: 'montserrat';
}
.checkbox>label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top:4px;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  /*background-color: #ccc;*/
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    /*z-index:25156332;*/
    
}
.checkbox>label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 4px;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555; 
      /*z-index:25156332;*/
}

.checkbox input[type="checkbox"] {
  opacity: 0;
  }
.checkbox input[type="checkbox"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; 
    
}
.checkbox input[type="checkbox"]:checked + label{
  color: #1E6C97;
}
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c";   
}
.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65; 
    
}
.checkbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed; 
    
}
.checkbox.checkbox-circle label::before {
  border-radius: 50%;
  }
.checkbox.checkbox-inline {
  margin-top: 0; 
    
}
.fltr-chk-box-bg{
  background-color: #E3E7EA;
  color: #1E6C97;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #1E6C97;
  border-color: #428bca;
  }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; 
    
}
.checkbox input[type="checkbox"]:checked + label + span{
  position: relative;
  z-index: 75456;
}
.checkbox input[type="checkbox"]:checked + label + span:before{
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 border-bottom: 13px solid #CCD2D6;
 border-top: 11px solid #CCD2D6;
 border-right: 50px solid #CCD2D6;
 border-left: 6px solid transparent;
 z-index: -7523;
}

＆＃13;

<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="well btcp-multi-lst bg-white margin-btm-0" id="scrollbar">
    <form>
        <div class="checkbox checkbox-primary">
            <input id="category1" type="checkbox" value=""> <label for="category1">Manufacturer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category2" type="checkbox" value=""> <label for="category2">Trading Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category3" type="checkbox" value=""> <label for="category3">Distributor / Merchant / Stockist</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category4" type="checkbox" value=""> <label for="category4">Wholesaler / Dealer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category5" type="checkbox" value=""> <label for="category5">Exporter</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category6" type="checkbox" value=""> <label for="category6">Converter</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category7" type="checkbox" value=""> <label for="category7">Broker</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category8" type="checkbox" value=""> <label for="category8">Direct Seller</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category9" type="checkbox" value=""> <label for="category9">Retailer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category10" type="checkbox" value=""> <label for="category10">Indenting Agent / Buying Office / Purchasing Agent</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category11" type="checkbox" value=""> <label for="category11">Carrying & Forwarding Agent</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category12" type="checkbox" value=""> <label for="category12">Packers</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category13" type="checkbox" value=""> <label for="category13">Printers</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category14" type="checkbox" value=""> <label for="category14">Recycling Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category15" type="checkbox" value=""> <label for="category15">Service Provider</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category16" type="checkbox" value=""> <label for="category16">Warehousing Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category17" type="checkbox" value=""> <label for="category17">Logistics Provider</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category18" type="checkbox" value=""> <label for="category18">Mining Company</label>
        </div>
    </form>
</div>

＆＃13;

Answer 1

is(':checked')函数返回一个布尔值，您无法使用length属性。

建议的方法是使用$('input[type="checkbox"]:checked').length > 1)选择器选中所有选中的复选框。如果它们的数量大于例如1，禁用其他复选框。

＆＃13;

$(document).ready(function(){
  $('.btcp-multi-lst').on('change', function(e) {
    if ($('input[type="checkbox"]:checked').length > 1) {
      $('input[type="checkbox"]:not(:checked)').prop('disabled', true);
    } else {
      $('input[type="checkbox"]:not(:checked)').prop('disabled', false);
    }
  });
});

＆＃13;

.checkbox{
  padding-left: 20px;
}
.checkbox>label {
    display: inline-block;
    position: relative;
    padding-left: 5px; 
    color: #686868;
    padding-top: 2px;
    min-height: 25px;
    font-family: 'montserrat';
}
.checkbox>span{
  padding-right: 17px;
  padding-top: 3px;
  font-family: 'montserrat';
}
.checkbox>label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top:4px;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  /*background-color: #ccc;*/
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    /*z-index:25156332;*/
    
}
.checkbox>label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 4px;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555; 
      /*z-index:25156332;*/
}

.checkbox input[type="checkbox"] {
  opacity: 0;
  }
.checkbox input[type="checkbox"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; 
    
}
.checkbox input[type="checkbox"]:checked + label{
  color: #1E6C97;
}
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c";   
}
.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65; 
    
}
.checkbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed; 
    
}
.checkbox.checkbox-circle label::before {
  border-radius: 50%;
  }
.checkbox.checkbox-inline {
  margin-top: 0; 
    
}
.fltr-chk-box-bg{
  background-color: #E3E7EA;
  color: #1E6C97;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #1E6C97;
  border-color: #428bca;
  }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; 
    
}
.checkbox input[type="checkbox"]:checked + label + span{
  position: relative;
  z-index: 75456;
}
.checkbox input[type="checkbox"]:checked + label + span:before{
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 border-bottom: 13px solid #CCD2D6;
 border-top: 11px solid #CCD2D6;
 border-right: 50px solid #CCD2D6;
 border-left: 6px solid transparent;
 z-index: -7523;
}

＆＃13;

<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="well btcp-multi-lst bg-white margin-btm-0" id="scrollbar">
    <form>
        <div class="checkbox checkbox-primary">
            <input id="category1" type="checkbox" value=""> <label for="category1">Manufacturer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category2" type="checkbox" value=""> <label for="category2">Trading Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category3" type="checkbox" value=""> <label for="category3">Distributor / Merchant / Stockist</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category4" type="checkbox" value=""> <label for="category4">Wholesaler / Dealer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category5" type="checkbox" value=""> <label for="category5">Exporter</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category6" type="checkbox" value=""> <label for="category6">Converter</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category7" type="checkbox" value=""> <label for="category7">Broker</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category8" type="checkbox" value=""> <label for="category8">Direct Seller</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category9" type="checkbox" value=""> <label for="category9">Retailer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category10" type="checkbox" value=""> <label for="category10">Indenting Agent / Buying Office / Purchasing Agent</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category11" type="checkbox" value=""> <label for="category11">Carrying & Forwarding Agent</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category12" type="checkbox" value=""> <label for="category12">Packers</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category13" type="checkbox" value=""> <label for="category13">Printers</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category14" type="checkbox" value=""> <label for="category14">Recycling Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category15" type="checkbox" value=""> <label for="category15">Service Provider</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category16" type="checkbox" value=""> <label for="category16">Warehousing Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category17" type="checkbox" value=""> <label for="category17">Logistics Provider</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category18" type="checkbox" value=""> <label for="category18">Mining Company</label>
        </div>
    </form>
</div>

＆＃13;

Answer 2

我对您的选择器进行了一些更改，因为它们有点关闭，您还必须使用evt.target才能确定哪个输入被定位以设置限制。如果您最多需要2个复选框，请将>更改为>=，就像在原始代码中一样，如果您想要最多3个，请将其保留为原样。

$('.btcp-multi-lst').on('click', function(evt) {
    if ($(this).find('input:checked').length > 3) {
      $(evt.target).prop("checked", false);
    };
});

Working Fiddle

干杯

Answer 3

您选择的checked是错误的。

首先，您应该更改绑定change事件的选择：

$('input[type=checkbox]').on('change', function(evt) {

然后更改checked个的选择：

$('form input[type=checkbox]:checked').length

最后，您应该与您的限制加1进行比较。因为当您选中一个复选框时，已检查的复选框的长度现在是（限制+ 1）。设置this.checked = false后，长度现在是限制的。

＆＃13;

$(document).ready(function(){
  $('input[type=checkbox]').on('change', function(evt) {
  var limit = 3;
  
    if ($('form input[type=checkbox]:checked').length >= limit + 1) {
    console.log('before: ' + $('input[type=checkbox]:checked').length);
      this.checked = false;
     console.log('after: ' + $('input[type=checkbox]:checked').length);
    };
  });
});

＆＃13;

.checkbox{
  padding-left: 20px;
}
.checkbox>label {
    display: inline-block;
    position: relative;
    padding-left: 5px; 
    color: #686868;
    padding-top: 2px;
    min-height: 25px;
    font-family: 'montserrat';
}
.checkbox>span{
  padding-right: 17px;
  padding-top: 3px;
  font-family: 'montserrat';
}
.checkbox>label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  top:4px;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  /*background-color: #ccc;*/
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    /*z-index:25156332;*/
    
}
.checkbox>label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 4px;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555; 
      /*z-index:25156332;*/
}

.checkbox input[type="checkbox"] {
  opacity: 0;
  }
.checkbox input[type="checkbox"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; 
    
}
.checkbox input[type="checkbox"]:checked + label{
  color: #1E6C97;
}
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c";   
}
.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65; 
    
}
.checkbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed; 
    
}
.checkbox.checkbox-circle label::before {
  border-radius: 50%;
  }
.checkbox.checkbox-inline {
  margin-top: 0; 
    
}
.fltr-chk-box-bg{
  background-color: #E3E7EA;
  color: #1E6C97;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #1E6C97;
  border-color: #428bca;
  }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; 
    
}
.checkbox input[type="checkbox"]:checked + label + span{
  position: relative;
  z-index: 75456;
}
.checkbox input[type="checkbox"]:checked + label + span:before{
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 border-bottom: 13px solid #CCD2D6;
 border-top: 11px solid #CCD2D6;
 border-right: 50px solid #CCD2D6;
 border-left: 6px solid transparent;
 z-index: -7523;
}

＆＃13;

<script src="https://use.fontawesome.com/aacdcb9275.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="well btcp-multi-lst bg-white margin-btm-0" id="scrollbar">
    <form>
        <div class="checkbox checkbox-primary">
            <input id="category1" type="checkbox" value=""> <label for="category1">Manufacturer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category2" type="checkbox" value=""> <label for="category2">Trading Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category3" type="checkbox" value=""> <label for="category3">Distributor / Merchant / Stockist</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category4" type="checkbox" value=""> <label for="category4">Wholesaler / Dealer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category5" type="checkbox" value=""> <label for="category5">Exporter</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category6" type="checkbox" value=""> <label for="category6">Converter</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category7" type="checkbox" value=""> <label for="category7">Broker</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category8" type="checkbox" value=""> <label for="category8">Direct Seller</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category9" type="checkbox" value=""> <label for="category9">Retailer</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category10" type="checkbox" value=""> <label for="category10">Indenting Agent / Buying Office / Purchasing Agent</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category11" type="checkbox" value=""> <label for="category11">Carrying & Forwarding Agent</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category12" type="checkbox" value=""> <label for="category12">Packers</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category13" type="checkbox" value=""> <label for="category13">Printers</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category14" type="checkbox" value=""> <label for="category14">Recycling Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category15" type="checkbox" value=""> <label for="category15">Service Provider</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category16" type="checkbox" value=""> <label for="category16">Warehousing Company</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category17" type="checkbox" value=""> <label for="category17">Logistics Provider</label>
        </div>
        <div class="checkbox checkbox-primary">
            <input id="category18" type="checkbox" value=""> <label for="category18">Mining Company</label>
        </div>
    </form>
</div>

＆＃13;

Answer 4

以下是

的方法

限制已选中复选框的数量

＆＃13;

// P.S: Use your desired selector to target your checkboxes:

var $ckb = $(":checkbox[name^=c]").on("change", function(){

  var $checked = $ckb.filter(":checked");
  $ckb.not($checked).prop("disabled", $checked.length >= 3);

});

＆＃13;

label{display:block;}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" name="c1"> Test 1</label>
<label><input type="checkbox" name="c2"> Test 2</label>
<label><input type="checkbox" name="c3"> Test 3</label>
<label><input type="checkbox" name="c4"> Test 4</label>
<label><input type="checkbox" name="c5"> Test 5</label>

＆＃13;

Answer 5

另一种方法：

添加课程＆＃34; limited-cb＆＃34;输入复选框标签。

 <div class="checkbox checkbox-primary">
            <input class="limited-cb" id="category1" type="checkbox" value=""> <label for="category1">Manufacturer</label>
        </div>

使用此jQuery不要点击第4个复选框。

$(".limited-cb").click( function(){
        var checkedCount = 0;
        var acceptCheck = false;
        var $cbs = $(".limited-cb");
        for(var i=0; i< $cbs.length; i++){
            var $cb = $cbs.eq(i);
            if($cb.prop("checked") === true){
                checkedCount++;
                if(checkedCount <= 3){
                    acceptCheck = true;
                }else{
                    acceptCheck = false;
                    break;
                }
            }
        }
        if(acceptCheck === false){
            $(this).prop("checked",false);
        }
    });

自定义复选框选择限制不起作用

5 个答案:

限制已选中复选框的数量