Отключить список флажков с бритвой

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 количество обработчиков событий? Если это так, как я могу зарегистрировать N число обработчиков событий с помощью для l oop?

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

Кроме того, будет хорошо, если вы переименовали свои идентификаторы лучше:)