开发者问题收集

获取某些复选框的 ID 并禁用它们

2018-06-25
71

我尝试获取某些复选框的 ID,并根据条件将这些复选框设置为禁用。但是,我在“Add:767 Uncaught TypeError:无法读取 HTMLInputElement.el.addEventListener.event (Add:767) 处的 null 属性‘disabled’”上收到此错误。 为什么它返回 null?我没有通过 ID 获取元素吗?

这是 JS:

    var days = 0;
    const checkboxMonthElement = document.querySelectorAll('.checkboxMonth');
    const checkboxDofmElement = document.querySelectorAll('.checkboxDofM');


    var test123 = document.getElementById('#Schedule_DofMInfo_27__IsChecked');

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

        days = 0;

        for (var i = 0; i < checkboxMonthElement.length; i++) {


            var NofD = parseInt($(checkboxMonthElement[i]).attr('data-test'));

            if (checkboxMonthElement[i].checked) {
                if (days < NofD)
                    days = NofD;
            }
        }
        console.log(days);

        if (days = 28) {
            console.log("Days is 28");
            console.log(test123);

           document.getElementById('#Schedule_DofMInfo_27__IsChecked').disabled === true;
        }





    }));

这是 HTML:

   <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDofM">
                        <input data-val="true" data-val-number="The field DofMID must be a number." data-val-required="The DofMID field is required." id="Schedule_DofMInfo_26__DofMID" name="Schedule.DofMInfo[26].DofMID" type="hidden" value="26" />
                        <input class="checkboxDofM" data-val="true" data-val-required="The IsChecked field is required." id="Schedule_DofMInfo_26__IsChecked" name="Schedule.DofMInfo[26].IsChecked" type="checkbox" value="true" /><input name="Schedule.DofMInfo[26].IsChecked" type="hidden" value="false" />
                        <label for="Schedule_DofMInfo_26__IsChecked">27</label>
                    </div>
                </li>
                <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDofM">
                        <input data-val="true" data-val-number="The field DofMID must be a number." data-val-required="The DofMID field is required." id="Schedule_DofMInfo_27__DofMID" name="Schedule.DofMInfo[27].DofMID" type="hidden" value="27" />
                        <input class="checkboxDofM" data-val="true" data-val-required="The IsChecked field is required." **id="Schedule_DofMInfo_27__IsChecked"** name="Schedule.DofMInfo[27].IsChecked" type="checkbox" value="true" /><input name="Schedule.DofMInfo[27].IsChecked" type="hidden" value="false" />
                        <label for="Schedule_DofMInfo_27__IsChecked">28</label>
                    </div>
                </li>
                <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDofM">
                        <input data-val="true" data-val-number="The field DofMID must be a number." data-val-required="The DofMID field is required." id="Schedule_DofMInfo_28__DofMID" name="Schedule.DofMInfo[28].DofMID" type="hidden" value="28" />
                        <input class="checkboxDofM" data-val="true" data-val-required="The IsChecked field is required." id="Schedule_DofMInfo_28__IsChecked" name="Schedule.DofMInfo[28].IsChecked" type="checkbox" value="true" /><input name="Schedule.DofMInfo[28].IsChecked" type="hidden" value="false" />
                        <label for="Schedule_DofMInfo_28__IsChecked">29</label>
                    </div>
                </li>
                <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDofM">
                        <input data-val="true" data-val-number="The field DofMID must be a number." data-val-required="The DofMID field is required." id="Schedule_DofMInfo_29__DofMID" name="Schedule.DofMInfo[29].DofMID" type="hidden" value="29" />
                        <input class="checkboxDofM" data-val="true" data-val-required="The IsChecked field is required." id="Schedule_DofMInfo_29__IsChecked" name="Schedule.DofMInfo[29].IsChecked" type="checkbox" value="true" /><input name="Schedule.DofMInfo[29].IsChecked" type="hidden" value="false" />
                        <label for="Schedule_DofMInfo_29__IsChecked">30</label>
                    </div>
                </li>
                <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDofM">
                        <input data-val="true" data-val-number="The field DofMID must be a number." data-val-required="The DofMID field is required." id="Schedule_DofMInfo_30__DofMID" name="Schedule.DofMInfo[30].DofMID" type="hidden" value="30" />
                        <input class="checkboxDofM" data-val="true" data-val-required="The IsChecked field is required." id="Schedule_DofMInfo_30__IsChecked" name="Schedule.DofMInfo[30].IsChecked" type="checkbox" value="true" /><input name="Schedule.DofMInfo[30].IsChecked" type="hidden" value="false" />
                        <label for="Schedule_DofMInfo_30__IsChecked">31</label>
                    </div>
                </li>
        </ul>
        <div class="checkbox-inline">
            <input id="checkAllDofm" name="checkAll" onclick="toggleDofM(this);" type="checkbox" value="true" /><input name="checkAll" type="hidden" value="false" />
            <label for="Select_All">Select All</label>
        </div>
    </div>
</center>
2个回答

这是因为您在使用 getElementById 时在 ID 中包含了“#”,这是不必要的,并且会导致 getElementById 查找 ID 中字面上包含“#”的元素。因此,不要执行

document.getElementById('#Schedule_DofMInfo_27__IsChecked')

而是执行此操作:

document.getElementById('Schedule_DofMInfo_27__IsChecked')
cathryngriffiths
2018-06-25

您应该使用

$('#Schedule_DofMInfo_27__IsChecked').attr("disabled", true);

document.getElementById('Schedule_DofMInfo_27__IsChecked').disabled === true; //(不带破折号)

lealceldeiro
2018-06-25