Question

我为依赖复选框创建了以下功能：

<div>
<input type="checkbox" value="true" class="controller01">
</div>
<div>
<input type="checkbox" value="true" class="controlled01">
</div>
<div>
<input type="checkbox" value="true" class="controller02">
</div>
<div>
<input type="checkbox" value="true" class="controlled02">
</div>
<div>
<input type="checkbox" value="true" class="controlled02">
</div>
<div>
<input type="checkbox" value="true" class="controlled02">
</div>
<div>
<input type="checkbox" value="true" class="controlled02">
</div>

和脚本：

$('.controlled01').prop('disabled', true);
$('.controller01').click(function () {
    var $inputs = $('input:checkbox')
    if ($(this).is(':checked')) {
        $('.controlled01').not(this).prop('disabled', false);
    } else {
        $('.controlled01').prop('disabled', true).prop('checked', false);
    }
})

$('.controlled02').prop('disabled', true);
$('.controller02').click(function () {
    var $inputs = $('input:checkbox')
    if ($(this).is(':checked')) {
        $('.controlled02').not(this).prop('disabled', false);
    } else {
        $('.controlled02').prop('disabled', true).prop('checked', false);
    }
})

您可以在那里查看：JSFiddle

到目前为止，这工作正常，但我想知道是否有某种方法可以使这个脚本更通用。如您所见，对于每组复选框（控制器和受控），我需要这样：

$('.controlled01').prop('disabled', true);
$('.controller01').click(function () {
    var $inputs = $('input:checkbox')
    if ($(this).is(':checked')) {
        $('.controlled01').not(this).prop('disabled', false);
    } else {
        $('.controlled01').prop('disabled', true).prop('checked', false);
    }
})

我想要的是一个脚本，它可以处理例如01-99组，而无需向脚本添加另一段代码。

Answer 1

如果您可以进行一些简单的标记更改

<div>
    <input type="checkbox" value="true" class="controller01 controller" data-target=".controlled01">
</div>
<div>
    <input type="checkbox" value="true" class="controlled01 controlled">
</div>
<div>
    <input type="checkbox" value="true" class="controller02 controller" data-target=".controlled02">
</div>
<div>
    <input type="checkbox" value="true" class="controlled02 controlled">
</div>
<div>
    <input type="checkbox" value="true" class="controlled02 controlled">
</div>
<div>
    <input type="checkbox" value="true" class="controlled02 controlled">
</div>
<div>
    <input type="checkbox" value="true" class="controlled02 controlled">
</div>

然后

$('.controlled').prop('disabled', true);
$('.controller').click(function () {
    var $this = $(this),
        $inputs = $($this.data('target'));

    $inputs.prop('disabled', !this.checked);
    if (!this.checked) {
        $inputs.prop('checked', false);
    }
})

演示：Fiddle

Answer 2

如果我理解正确你想要这样的东西：

function controlGroups(controller, controlled){
    $(controlled).prop('disabled', true);
    $(controller).click(function () {
        var $inputs = $('input:checkbox')
        if ($(this).is(':checked')) {
            $(controlled).not(this).prop('disabled', false);
        } else {
            $(controlled).prop('disabled', true).prop('checked', false);
        }
    })
}

用法：

for(var i=1; i < 99; i++){
    controlGroups('.controller'+i,'.controlled'+i);
}

使用jQuery的相关复选框

2 个答案: