javascript - 以下脚本根据以下场景中的某些条件将类应用于 div 时存在什么问题？

Question

我想根据 div 标签内包含的复选框是否禁用来将特定类应用于 div。但我无法申请或删除该类(class)。您能帮助我指导我如何实现这一目标吗？以下是我的代码:

<p id="parentCheckbox" class="custom-form"> 
  <input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
</p>

<p class="custom-form">
  <div class="ez-checkbox">
  <input id="" class="custom-check checkBoxClass ez-hide ez-checked" type="checkbox" name="item[]"></input>
  </div>
  <label>
      J2P: Electromagnetic Waves
  </label>
</p> 
<p class="custom-form">
  <div class="ez-checkbox"><input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" disabled="disabled" name="item[]"></input>
  </div>
  <label>
      NEET XII Testlet : Electrostatics 2
  </label>
</p>
<p class="custom-form">
  <div class="ez-checkbox">
  <input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name="item[]"></input>
  </div>
  <label>
      J2P: Ray Optics & Optical Instruments
  </label>
</p>
<p class="custom-form">
  <div class="ez-checkbox">
  <input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" disabled="disabled" name="item[]"></input>
  </div>
  <label>
      NEET XII Testlet : Electrostatics 2
  </label>
</p>
<p class="custom-form">
  <div class="ez-checkbox"><input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name="item[]"></input>
  </div>
  <label>
      J2P: Electromagnetic Waves
  </label>
</p>
<p class="custom-form">
  <div class="ez-checkbox"><input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" disabled="disabled" name="item[]"></input>
  </div>
  <label>
      NEET XII Test : Electrostatics
  </label>
</p>
<script type="text/javascript" language="javascript">
$(document).ready(function()  { 
$("#ckbCheckAll").click(function () { 
    if ($(this).is(':not(:checked)'))
      $(".ez-checkbox input:not(:disabled)").removeClass("ez-checked");

    if($(this).is(':checked'))
      $(".ez-checkbox input:not(:disabled)").addClass("ez-checked");
  });
});
</script>

我已经尝试了很多方法来实现这件事，但没有成功。请帮助我实现这一目标。提前致谢。

Answer 1

尽管可以简化，但您的代码工作得很好。

http://jsfiddle.net/JYaPx/1/

$("#ckbCheckAll").click(function () { 
    $(".ez-checkbox input:enabled").toggleClass("ez-checked", this.checked);
});

如果它似乎不起作用，则可能是 jQuery 未加载，或者您的 ez-checked 样式没有产生视觉差异。

<小时/>

如果要将类添加到 div，请使用 .parent() 或 .closest()。

$("#ckbCheckAll").click(function () { 
    $(".ez-checkbox input:enabled").closest("div")
                                   .toggleClass("ez-checked", this.checked);
});

<小时/>

如果您想将类添加到 input 和 div，请结合这两个解决方案。

$("#ckbCheckAll").click(function () { 
    $(".ez-checkbox input:enabled").toggleClass("ez-checked", this.checked)
                                   .closest("div")
                                   .toggleClass("ez-checked", this.checked);
});