Question

使用以下skript启用/禁用复选框取决于其他复选框。任何想法如何使这个脚本更简单和一般。例如，如果我将来需要添加另一组复选框。

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>

脚本

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

Answer 1

如何更像

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

FIDDLE

Answer 2

这就是我所需要的：）

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

使用jQuery通过另一个checkbox / es启用checkbox / es

2 个答案: