使用jQuery的相關復選框

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

到目前為止，這工作正常，但是我想知道是否有某種方法可以使此腳本更通用。 如您所見，對於每組復選框（ controller和控 ），我都需要具備以下條件：

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

演示： 小提琴

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