使用剃须刀禁用复选框列表

Question

我有以下代码来呈现的复选框行

<div id="notificationSettings">
@for (var itr = 0; itr < Model.Item1.Settings.Length; itr++)
{
<div class="col-md-3 col-sm-12 form-group text-center">
<p>@Model.Item1.Settings[itr].Name</p>
</div>
<div class="col-md-3 col-sm-12 form-group text-center">
<input asp-for="Item1.Settings[itr].Notify" type="checkbox" style="margin-top: 10px;" />
<span asp-validation-for="Item1.Settings[itr].Notify" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12 form-group text-center">
<input asp-for="Item1.Settings[itr].ByEmail" type="checkbox" style="margin-top: 10px;"/>
<span asp-validation-for="Item1.Settings[itr].ByEmail" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12 form-group text-center">
<input asp-for="Item1.Settings[itr].BySms" type="checkbox" style="margin-top: 10px;" />
<span asp-validation-for="Item1.Settings[itr].BySms" class="text-danger"></span>
</div>
}
</div>

如果我想禁用ByEmail和BySms复选框，如果未选中Notify复选框，那么我可以对一组复选框执行以下操作：

document.getElementById("Item1_Settings_0__Notify").addEventListener('change', function() {
if(this.checked) {
document.getElementById("Item1_Settings_0__ByEmail").disabled = false;
document.getElementById("Item1_Settings_0__BySms").disabled = false;
} else {
document.getElementById("Item1_Settings_0__ByEmail").disabled = true;
document.getElementById("Item1_Settings_0__BySms").disabled = true;
}
});

我的问题是，我是否可以有一个事件处理程序，它可以处理任何N个只在Id中不同的复选框。还是我需要N个事件处理程序？如果是这种情况，我如何用for循环注册N个事件处理程序？

Answer 1

假设您知道javascript中的闭包，那么以下内容应该有效：

function handleCheckbox(i) {
document.getElementById("Item1_Settings_" + i + "__Notify").addEventListener('change', function() {
if(this.checked) {
document.getElementById("Item1_Settings_" + i + "__ByEmail").disabled = false;
document.getElementById("Item1_Settings_" + i + "__BySms").disabled = false;
} else {
document.getElementById("Item1_Settings_" + i + "__ByEmail").disabled = true;
document.getElementById("Item1_Settings_" + i + "__BySms").disabled = true;
document.getElementById("Item1_Settings_" + i + "__ByEmail").checked = false;
document.getElementById("Item1_Settings_" + i + "__BySms").checked = false;
}
});
}

然后这个：

for (var i = 0; i < @Model.Item1.Settings.Length; i++) {
handleCheckbox(i);
}

此外，如果你更好地重命名你的id，那就太好了：(