Enable checkbox/es by another checkbox/es using jQuery

Question

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.

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

adeneo · Accepted Answer · 2014-03-10 17:32:46Z

1

How about something more like

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

FIDDLE

answered Mar 10, 2014 at 17:32

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Miro Over a year ago

Thanks, nice script. I added .prop('checked', false) to uncheck dependand checkboxes when controller is unchecked, but this seems to not working when have more than one level. Check Controller3 and Controller3.1

adeneo Over a year ago

@Miro - Oh, didn't notice that. It gets a little more complicated for more levels, but something like this -> jsfiddle.net/gS98E/3

Miro Over a year ago

Seems to me that it is working like the script before, the idea of controller 3 and 3.1 is that checkbox next to 3.1 is controlled by 3.1 checkbox but it belong to controller3 group also, so when you unselect the controller3 it should also clear and uncheck 3.1 or any other subgroups if used.

Miro Over a year ago

Not sure if I make myself clear, what I need is when .controller03 is unchecked .controlled03_1 also need to be uncheckd, so far I have created if statement and if the .controller03 is not checked it will disable the .controlled03_1 but dont know how to make this function more general if I will need to add another subgroups in the future

Miro · Accepted Answer · 2014-03-21 13:14:01Z

0

This is what I needed :)

    $(function () {
    $('[type="checkbox"]').change(function () {
        $(this).closest('div').next('aside').find('[type="checkbox"]').prop({
            disabled: !this.checked,
            checked: false
        }).change()
    }).change()

    $('input[id*=selectCheckboxes]').click(function () {
        var fieldset = $(this).closest('fieldset')
        fieldset.find('[type="checkbox"]').prop({
            checked: this.checked,
            disabled: false
        })
        if (!this.checked) fieldset.find('aside [type="checkbox"]').prop({
            checked: false,
            disabled: true
        })
    });
});

answered Mar 21, 2014 at 13:14

Miro

131 silver badge4 bronze badges

Collectives™ on Stack Overflow

Enable checkbox/es by another checkbox/es using jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related