JSFiddle - React, Tailwind, and code Playground

by vicky081

HTML

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

JavaScript

$(document).ready(function()  { 
$("#ckbCheckAll").click(function () { 
    alert("hi");
    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");
  });
});