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

Question

Since i have designed the custom checkbox, i wanted to limit the checkbox. I could easily add limits for default checkbox but in my case its not working because of my own design & I have no idea about custom checkbox selection limits. Please help me to get out off it.

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

 .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; } 

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

Answer 1

is(':checked') function returns a single, boolean value, which on you can't use length property.

Suggested approach would be selecting all the checked checkboxes with $('input[type="checkbox"]:checked').length > 1) selector. If their amount is bigger than eg 1 , disable other checkboxes.

 $(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); } }); }); 

 .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; } 

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

Answer 2

I did a few changes to your selectors because they were a bit off, also you have to use evt.target in order to actually pinpoint which input is being targeted in order to set your limit. If you want a maximum of 2 checked boxes, then change the > to >= just like in your original code, if you want a maximum of 3 leave it just like that.

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

Working Fiddle

Cheers

Answer 3

Your selection of checked ones is wrong.

Firstly you should change the selection for binding change event:

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

And then change the selection for checked ones:

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

Last, you should compare with your limit plus 1. Because when you check a checkbox, the length of checked ones is now (limit + 1). After setting this.checked = false , the length is limit now.

 $(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); }; }); }); 

 .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; } 

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

Answer 4

Here's how to

Limit number of checked checkboxes

 // PS: 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); }); 

 label{display:block;} 

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

Answer 5

Another way of doing it:

Add the class "limited-cb" to your input checkboxes tags.

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

Use this jQuery not to let the 4th checkbox be clicked.

$(".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);
        }
    });