javascript - Enable checkbox/es by another checkbox/es using jQuery -


using following skript enable/disable checkboxes depend on other checkboxes. idea how make script more simple , general. example if need add group of checkboxes in future.

fiddle

html

 <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

$(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) } 

how more like

$('[class^=controller]').on('change', function() {     var klass = this.classname.replace('controller', 'controlled');     $('.' + klass).prop('disabled', !this.checked) }).trigger('change'); 

fiddle


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -