i have condition to add disabled class to my div after select multiple check boxes which is 5

user_14810105 0
Viewed 95

i have condition to add disabled class to my div after select multiple check boxes which is 5 . this code add disabled to all checkboxes div which includes the current selected as well.. so i want that it disabled only the unselected after 5 select boxes not on all div..

<div class="wapf-swatch wapf-swatch--image wapf-checked">
<input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]">
<input type="checkbox" id="wapf_field_5fd25d21855fd_kd4ik" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc="">
<img src="http://sweetshop.nantwichwebdesign.co.uk/wp-content/uploads/2020/12/1.png">
<span class="wapf-ttp"><span>Haribo Strawberry</span></span>
</div>

$(":checkbox[class='.wapf-input']").change(function(){
  if ($(":checkbox[class='.wapf-input']:checked").length == 2)                                              
   $('.wapf-swatch').addClass('disabled');  
  else                                                     
   $('.wapf-swatch').removeClass('disabled', false); 
});
checkbox html jquery javascript
1 Answers

You can use :not(:checked) to get all checkboxes which are not checked and then simply use addClass to add disabled class else use removeClass to remove the class

Demo Code :

$(".wapf-input").change(function() {
  //get checked checkbox length
  if ($(".wapf-swatch input[type=checkbox]:checked").length == 2) {
    //get checkbox not checked add class disable
    $('.wapf-swatch > input[type=checkbox]:not(:checked)').closest(".wapf-swatch").addClass("disabled")
  } else {
    //remove class disabled
    $('.wapf-swatch').removeClass("disabled")

  }
});
.disabled {
  pointer-events: none;
  background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-swatch wapf-swatch--image wapf-checked">
  <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]">
  <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc="">
  <span class="wapf-ttp"><span>Strawberry</span></span>
</div>
<div class="wapf-swatch wapf-swatch--image wapf-checked">
  <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]">
  <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc="">
  <span class="wapf-ttp"><span> Strawberr1</span></span>
</div>
<div class="wapf-swatch wapf-swatch--image wapf-checked">
  <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]">
  <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc="">
  <span class="wapf-ttp"><span>Haribo11</span></span>
</div>
<div class="wapf-swatch wapf-swatch--image wapf-checked">
  <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]">
  <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc="">
  <span class="wapf-ttp"><span>Haribo111</span></span>
</div>
<div class="wapf-swatch wapf-swatch--image wapf-checked">
  <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]">
  <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc="">
  <span class="wapf-ttp"><span>Haribo12</span></span>
</div>

user_106064000
Related