Enable checkboxes by another checkboxes

Enable checkboxes by another checkboxes

Hi Guys, I using following skript to enable/disable checkboxes depend on other checkboxes. Any idea how to make this script more simple and general. For example if I will need to add another group of checkboxes in the future or if there will be more than two levels.

Fiddle

HTML
  1. <form name="" id=""> <input type="checkbox" name="" class="controller01" />Controller1 <input type="checkbox" name="" class="controlled01" /> <input type="checkbox" name="" class="controlled01" /> <input type="checkbox" name="" class="controlled01" /> <br /> <input type="checkbox" name="" class="controller02" />Controller2 <input type="checkbox" name="" class="controlled02" /> <input type="checkbox" name="" class="controlled02" /> <input type="checkbox" name="" class="controlled02" /> <br /> <input type="checkbox" name="" class="controller03" />Controller3 <input type="checkbox" name="" class="controlled03" /> <input type="checkbox" name="" class="controlled03 controller03_1" />Controller 3.1 <input type="checkbox" name="" class="controlled03 controlled03_1" /> </form>

Script




  1. $(function () { enable_cb(); $(".controller01").click(enable_cb); }); function enable_cb() { $(".controlled01").prop("disabled", !this.checked); $(".controlled01").prop("checked", false) } $(function () { enable_cb2(); $(".controller02").click(enable_cb2); }); function enable_cb2() { $(".controlled02").prop("disabled", !this.checked); $(".controlled02").prop("checked", false) } $(function () { enable_cb3(); $(".controller03").click(enable_cb3); }); function enable_cb3() { $(".controlled03").prop("disabled", !this.checked); $(".controlled03").prop("checked", false); $(".controlled03_1").prop("checked", false); $(".controlled03_1").prop("disabled", true) } $(function () { enable_cb4(); $(".controller03_1").click(enable_cb4); }); function enable_cb4() { $(".controlled03_1").prop("disabled", !this.checked); $(".controlled03_1").prop("checked", false) }