如何通过单个复选框禁用ListBoxFor中的复选框列表

你的核心需求是：选中“未报告”复选框时，清空原ListBox的所有选中项并禁用它；取消复选框时恢复ListBox的可用状态。同时原代码存在事件重复绑定的问题（将复选框的change事件绑定放在了multiselect的change回调内，每次触发都会新增绑定，导致逻辑混乱）。

修正后的完整jQuery代码 #

$(document).ready(function () {
    // 缓存DOM元素，避免重复查找
    const $raceMulti = $('.multiselect .multi');
    const $raceDiv = $('#RaceDiv');
    const $raceListDiv = $('#RaceListDiv');
    const $notReportedDiv = $('#NotReportedDiv');
    const $unknownDiv = $('#UnknownDiv');
    const $asianSubselect = $('#AsianSubselectDiv');
    const $apacSubselect = $('#APACSubselectDiv');
    const $notReportedCheckbox = $('#NotReportedDiv input:checkbox');
    const $unknownCheckbox = $('#UnknownDiv input:checkbox');

    // 处理多选框的切换逻辑
    $raceMulti.on("change", function () {
        const $raceLink = $(this).children('a');
        const raceValue = $raceLink.attr('id');
        const isChecked = $raceLink.hasClass('checked');

        // 未报告选项处理
        if (raceValue === "Not_reported") {
            if (isChecked) {
                $raceListDiv.hide();
                $notReportedDiv.show();
                // 自动选中复选框（可选，根据需求调整）
                $notReportedCheckbox.prop('checked', true);
                // 同步清空并禁用ListBox
                $raceDiv.find('option').prop('selected', false);
                $raceDiv.prop('disabled', true);
            }
        }
        // 未知选项处理
        else if (raceValue === "Unknown") {
            if (isChecked) {
                $raceListDiv.hide();
                $unknownDiv.show();
                // 自动选中复选框（可选）
                $unknownCheckbox.prop('checked', true);
                // 同步清空并禁用ListBox
                $raceDiv.find('option').prop('selected', false);
                $raceDiv.prop('disabled', true);
            }
        }
        // 亚洲子选项处理
        else if (raceValue === 'Asian_(Select_all_that_apply)') {
            $asianSubselect.toggle(isChecked);
        }
        // 太平洋岛民子选项处理
        else if (raceValue === 'Native_Hawaiian_OR_Other_Pacific_Islander_(Select_all_that_apply)') {
            $apacSubselect.toggle(isChecked);
        }
    });

    // 未报告复选框的切换逻辑（移到外层，避免重复绑定）
    $notReportedCheckbox.change(function () {
        const isChecked = $(this).is(':checked');
        if (isChecked) {
            // 清空ListBox所有选中项
            $raceDiv.find('option').prop('selected', false);
            // 禁用ListBox
            $raceDiv.prop('disabled', true);
            // 如果使用了多选插件（如bootstrap-multiselect），需要刷新插件状态
            // $raceDiv.multiselect('refresh');
        } else {
            // 启用ListBox
            $raceDiv.prop('disabled', false);
            $raceListDiv.show();
            $notReportedDiv.hide();
            // 取消原多选框中"Not_reported"的选中状态
            $('.multiselect .multi a#Not_reported').removeClass('checked');
        }
    });

    // 未知复选框的切换逻辑
    $unknownCheckbox.change(function () {
        const isChecked = $(this).is(':checked');
        if (isChecked) {
            $raceDiv.find('option').prop('selected', false);
            $raceDiv.prop('disabled', true);
            // $raceDiv.multiselect('refresh'); // 按需启用
        } else {
            $raceDiv.prop('disabled', false);
            $raceListDiv.show();
            $unknownDiv.hide();
            $('.multiselect .multi a#Unknown').removeClass('checked');
        }
    });
});

关键修正点说明 #

1. 缓存DOM元素：提前查找并缓存所有需要操作的元素，提升性能，避免重复DOM查询。
2. 事件绑定移至外层：将复选框的change事件绑定从multiselect的回调中移出，避免每次触发多选框事件都新增绑定，导致逻辑重复执行。
3. 清空选中项+禁用ListBox：
   • 用$raceDiv.find('option').prop('selected', false)清空所有选中的选项
   • 用$raceDiv.prop('disabled', true)禁用ListBox，防止用户再次操作
4. 复选框取消时的状态同步：取消复选框时，不仅恢复ListBox的可用状态，还要同步取消原多选框中对应选项的选中状态（如移除checked类），保持界面状态一致。
5. 多选插件兼容（可选）：如果你的ListBox使用了第三方多选插件（如bootstrap-multiselect），需要调用插件的refresh方法来更新界面显示。

你之前尝试的问题点 #

你之前的代码中，比如RaceListDiv.removeProp(':checked')这类写法是错误的：

• removeProp用于移除元素的属性，不能传入:checked选择器
• RaceListDiv是容器div，不是表单控件，直接操作它的checked属性无效
• 正确的做法是直接操作ListBox（#RaceDiv）内部的option元素，修改它们的selected属性

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