Jquery select2如何禁用单个下拉框选项且不影响其他下拉框

问题原因 #

• 代码核心错误是内部使用了全局选择器$('option')，会匹配页面所有下拉框的选项，没有限定在当前遍历的<select>范围内，只要有一个下拉框选中非0值，就会禁用全页面所有未选中的选项
• 针对已完成初始化的Select2组件，修改option的disabled属性后需要手动触发change事件，通知组件更新渲染状态，否则界面可能不会同步最新的禁用状态

修复后代码（初始化执行版本） #

如果逻辑是页面加载初始化时执行一次校验：

$('select').each(function () {
    const $currentSelect = $(this);
    const selectedValue = $currentSelect.find('option:selected').val();
    if (selectedValue !== '0') {
        // 仅选中当前下拉框内的未选中option设置禁用
        $currentSelect.find('option:not(:selected)').attr('disabled', true);
        $currentSelect.trigger('change');
    }
});

实时响应选择版本 #

如果需要用户每次选择下拉框时都自动触发校验逻辑：

$('select').on('change', function () {
    const $currentSelect = $(this);
    const selectedValue = $currentSelect.find('option:selected').val();
    // 先重置所有option的禁用状态，避免切换选项时残留旧规则
    $currentSelect.find('option').attr('disabled', false);
    if (selectedValue !== '0') {
        $currentSelect.find('option:not(:selected)').attr('disabled', true);
    }
    $currentSelect.trigger('change');
});

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