点击「不感兴趣」复选框时禁用指定复选框组的问题求助

原代码的问题在于直接给<div>元素设置disabled属性，但div元素本身不支持disabled属性，所以无法实现禁用内部复选框的效果。需要遍历目标div内的所有复选框，逐个设置它们的disabled状态。

修改后的JavaScript代码 #

function Reassign(cb) {
    // 获取目标div内的所有复选框
    const checkboxes = document.querySelectorAll('#reassignChecks input[type="checkbox"]');
    // 根据勾选状态设置所有复选框的禁用状态
    checkboxes.forEach(checkbox => {
        checkbox.disabled = cb.checked;
    });
}

代码说明 #

• 使用document.querySelectorAll('#reassignChecks input[type="checkbox"]')精准获取reassignChecks div内的所有复选框元素
• 通过forEach循环遍历每个复选框，将它们的disabled属性设置为与notInterest复选框的checked状态一致
• 当notInterest被勾选时，内部所有复选框禁用；取消勾选时，恢复可用

完整代码示例 #

HTML代码

<div>
    <input style="margin-left:30px" id="notInterest" type="checkbox" name="test" onclick="Reassign(this)"> Not Interested
</div>

<div class="form-group row" id="reassignChecks">
    @for (var i = 1; i <= 10; i++) {
        <input name="AreChecked" type="checkbox" value="@i" /> @i
        <br />
    }
    <button>Click</button>
</div>

JavaScript代码

function Reassign(cb) {
    const checkboxes = document.querySelectorAll('#reassignChecks input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.disabled = cb.checked;
    });
}

内容的提问来源于stack exchange，提问作者rimi