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

コードは単純化できますが、問題なく動作します。

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は、2 つのソリューションを組み合わせます。

$("#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 に答える