在选择多个复选框（即 5）后，我有条件将禁用的类添加到我的 div

Posted 2023-05-08

【中文标题】在选择多个复选框（即 5）后，我有条件将禁用的类添加到我的 div

【英文标题】：i have condition to add disabled class to my div after select multiple check boxes which is 5

【发布时间】：2021-03-23 06:30:44

【问题描述】：

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

【问题讨论】：

请对问题提出minimal reproducible example

你禁用了什么？

请添加 html 以便我们重现此内容

@Adhitya 其非常简单的复选框单击 .. 但我在 2 个复选框之后设置了一个限制，直到其他未选中为止，我不再选择 .. 但我需要禁用主 div .. 所以它不会再次取消选中它这就是问题

你使用 HTML 吗？如果是，请添加。

【参考方案1】：

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

演示代码：

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

【讨论】：

太棒了！！你拯救了我的一天斯瓦蒂......天才......我花了 2 天时间才做到这一点，但你真是太棒了