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="http://ift.tt/2pQVJ6M"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://ift.tt/2apRjw3">
<!-- jQuery library -->
<script src="http://ift.tt/2nYZfvi"></script>
<!-- Latest compiled JavaScript -->
<script src="http://ift.tt/2aHTozy"></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>
Aucun commentaire:
Enregistrer un commentaire