Javascript - переменная forEach не определена и setAttribute не будет работать - PullRequest
Новая
       7

Javascript - переменная forEach не определена и setAttribute не будет работать

0 голосов
/ 09 мая 2018

Я пытаюсь заставить setAttribute ("disabled", true) работать с массивом флажков. До сих пор я создал оператор if, который проверяет массив и, если один из них проверен, возвращает «флажок» в console.log. В том же операторе я добавил оператор foreach, чтобы установить флажки для другого массива на отключенные, если установлены какие-либо из полей в первом массиве. Я получаю сообщение об ошибке «день не определен». Как я могу решить это? 

        <center>
        <div class="col-2">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the day(s) of the month the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.DofMID)
                @Html.DisplayFor(m => m.DofMNo)
                @for (int i = 0; i < Model.DofMInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline checkboxDofM" id= "checkboxDofM">
                            @Html.HiddenFor(m => m.DofMInfo[i].DofMID)
                            @Html.CheckBoxFor(m => m.DofMInfo[i].IsChecked)
                            @Html.LabelFor(m => m.DofMInfo[i].IsChecked, Model.DofMInfo[i].DofMNo)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>

    <center>
        <div class="col-2">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the month(s) the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.monthID)
                @Html.DisplayFor(m => m.monthName)
                @for (int i = 0; i < Model.MonthInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline" id="checkboxMonth">
                            @Html.HiddenFor(m => m.MonthInfo[i].monthID)
                            @Html.CheckBoxFor(m => m.MonthInfo[i].IsChecked)
                            @Html.LabelFor(m => m.MonthInfo[i].IsChecked, Model.MonthInfo[i].monthName)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>

    <center>
        <div class="col-3">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the day(s) the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.dayID)
                @Html.DisplayFor(m => m.dayName)
                @for (int i = 0; i < Model.DayInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline checkboxDay" id="checkboxDay">
                            @Html.HiddenFor(m => m.DayInfo[i].dayID)
                            @Html.CheckBoxFor(m => m.DayInfo[i].IsChecked)
                            @Html.LabelFor(m => m.DayInfo[i].IsChecked, Model.DayInfo[i].dayName)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>


<script>

    const checkboxDofMElements = document.querySelectorAll('.checkboxDofM');
    const checkboxDayElements = document.querySelectorAll('.checkboxDay');



    checkboxDofMElements.forEach(el => el.addEventListener('change', event => {


        if (event.target.checked) {
            console.log("checked");

            checkboxDayElements.forEach(day in checkboxDayElements)
            {
                day.setAttribute("disabled", true);
            }

        }
            }));



</script>

    <input type="submit" value="Submit Data" id="btnSubmit" />

}
...