为何Select下拉框设置disabled属性后选项仍处于启用状态？

我明白你的困扰——直接修改原生<option>的disabled属性后，看起来DOM已经变了，但插件生成的下拉框还是能选对应的选项。这是因为你用了Bootstrap Select（从代码里的selectpicker方法能看出来）这类UI插件，它们会把原生<select>转换成自定义的交互层，原生DOM的变化不会自动同步到插件UI上。下面用原生JS给你一步步解决：

第一步：先修正代码里的小笔误 #

你在addToSelect函数里定义了var input1 = document.getElementById('unallowedInput');，但循环里却写了eingabe1.appendChild(opt1);，这会直接报错，先改成：

input1.appendChild(opt1);

第二步：实现正确的禁用逻辑（原生JS） #

我们需要完成三件事：获取当前选中项、同步另一个下拉框的禁用状态、通知插件刷新UI。假设你的第二个下拉框ID是allowedInput（记得替换成你实际的ID），修改后的disableOption函数如下：

function disableOption() {
  // 获取当前触发事件的下拉框
  const currentSelect = document.getElementById('unallowedInput');
  // 获取另一个下拉框（替换成你的实际ID）
  const otherSelect = document.getElementById('allowedInput');

  // 拿到当前选中的所有选项的value（因为是多选，要处理多个选中项）
  const selectedValues = Array.from(currentSelect.selectedOptions).map(opt => opt.value);

  // 遍历另一个下拉框的所有选项，设置禁用/启用状态
  Array.from(otherSelect.options).forEach(opt => {
    opt.disabled = selectedValues.includes(opt.value);
  });

  // 关键：通知Bootstrap Select刷新UI，让禁用状态真正生效
  if (typeof currentSelect.selectpicker === 'function') {
    currentSelect.selectpicker('refresh');
    otherSelect.selectpicker('refresh');
  }
}

第三步：实现双向同步 #

别忘了给第二个下拉框也加上onchange事件，这样当你在第二个下拉框选选项时，第一个下拉框的对应选项也会被禁用：

<div class="select_box"> 
  <select id="allowedInput" onchange="disableOption()" class="select2 col-lg-12" multiple title="Auswählen" data-max-options="3" data-max-options-text="Es dürfen nur drei Elemente ausgewählt werden!"></select> 
</div>

为什么之前的操作没生效？ #

你修改原生<option>的disabled属性后，Bootstrap Select的交互层根本不知道这个变化——这类插件会在初始化时生成一套独立的DOM来展示下拉选项，必须调用它的refresh方法，让插件重新读取原生<select>的状态并更新UI，这样禁用的选项才会真正不能被选中。

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