1

我想根据 div 标签中包含的复选框是否禁用，将特定类应用于 div。但我无法申请或删除课程。您能否通过指导我如何实现这一目标来帮助我？以下是我的代码：

<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>

我已经尝试了很多来让这件事发生，但做不到。请帮助我实现它。提前致谢。

4

2 回答 2

0

Your code works just fine, though it could be simplified.

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

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

If it doesn't seem to work, either jQuery isn't loaded, or your ez-checked style isn't making a visual difference.

If you want to add the class to the div, then use .parent(), or .closest().

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

If you want to add the class to the input and the div, then combine the two solutions.

$("#ckbCheckAll").click(function () { 
    $(".ez-checkbox input:enabled").toggleClass("ez-checked", this.checked)
                                   .closest("div")
                                   .toggleClass("ez-checked", this.checked);
});
于 2013-10-08T06:05:22.177 回答
0

要添加/删除包含 div 的类，您只需要使用父选择器：

这是一个工作示例：

http://jsfiddle.net/LWNXd/

   // This follows the same logic as your current code,  just written slightly different
   $(document).ready(function()  { 
        $('#formA').on('click', '.ez-checkbox input:not(:disabled)',function(){
            var elem = $(this); 

            elem.parent('div')[ ((elem.is(':not(:checked)')) ? 'remove':'add')+'Class']('ez-checked');
        }); 
    });
于 2013-10-08T06:13:53.900 回答