我有条件在 select 多个复选框后添加禁用 class 到我的 div，即 5

Question

我有条件在 select 多个复选框（即 5）之后将禁用 class 添加到我的 div。此代码将禁用添加到所有复选框 div，其中包括当前 selected 以及..所以我希望它仅禁用 unselected 在 5 select 框之后不在所有 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); 
});

Answer 1

您可以使用 :not(:checked) 获取所有未选中的复选框，然后只需使用 addClass 添加 disabled class 否则使用 removeClass删除 class

演示代码 :

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

我有条件在 select 多个复选框后添加禁用 class 到我的 div，即 5

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

html

javascript

checkbox

jquery