samedi 6 mai 2017

Custom checkbox selection limit is not working

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