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.
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');
Comments
Post a Comment