Disabled属性未变更求助：选中特定optgroup无法启用指定input

嘿，我来帮你揪出这个问题的症结！你说选中第二个<optgroup>的选项时要启用id="winback"的输入框，其他情况禁用，但切换选项时完全没反应，输入框一直处于禁用状态——不过console.log显示optgroup变量的值是符合预期的，那大概率是判断条件的逻辑或者操作输入框禁用状态的代码出了小问题，我给你梳理几个常见的坑和解决方案：

先检查核心逻辑的常见错误 #

1. 判断条件可能写反或匹配错误 #

你说optgroup变量的值是对的，那先看你判断“是否是第二个optgroup”的逻辑：

• 如果你是用索引判断，要记住DOM元素的children是从0开始计数的，第二个optgroup的索引是1，不是2！比如你要是写成indexOf(optgroup) === 2，那永远匹配不上，输入框就一直禁用。
• 如果你是用label属性判断，要注意label的字符串是否完全匹配（包括大小写、空格），比如你optgroup的label是"第二组"，但判断时写成了"第2组"，也会匹配失败。

2. 输入框的disabled属性赋值写反 #

比如你本来想选中目标组时启用输入框，结果写成了：

winback.disabled = isSecondOptgroup;

这就会导致选中目标组时反而禁用，其他时候启用——但你说输入框一直禁用，那可能是这个条件永远为true？结合你说console.log的optgroup是对的，更可能是判断条件没命中，导致isSecondOptgroup一直是false，最终输入框始终保持禁用。

给你一个可直接测试的完整示例 #

你可以把下面的代码复制过去测试，看看是不是符合你的需求：

<select id="targetSelect">
  <optgroup label="第一组">
    <option value="opt1">第一组选项1</option>
    <option value="opt2">第一组选项2</option>
  </optgroup>
  <optgroup label="第二组">
    <option value="opt3">第二组选项1</option>
    <option value="opt4">第二组选项2</option>
  </optgroup>
  <optgroup label="第三组">
    <option value="opt5">第三组选项1</option>
  </optgroup>
</select>
<input type="text" id="winback" disabled placeholder="选中第二组选项我就会启用">

<script>
// 绑定select的change事件
document.getElementById('targetSelect').addEventListener('change', function(e) {
  // 获取当前选中的选项
  const selectedOption = e.target.selectedOptions[0];
  // 获取该选项所属的optgroup
  const optgroup = selectedOption.parentElement;
  
  // 这里用label判断是否是第二个optgroup，你也可以换成索引判断
  const isSecondOptgroup = optgroup.label === '第二组';
  // 索引判断的写法：Array.from(this.children).indexOf(optgroup) === 1;
  
  console.log('当前所属optgroup:', optgroup); // 你说这个输出是符合预期的
  
  // 操作输入框的禁用状态
  const winbackInput = document.getElementById('winback');
  winbackInput.disabled = !isSecondOptgroup;
});
</script>

额外排查点 #

如果上面的示例能正常工作，但你的代码还是不行，那还要检查：

• 事件绑定是否生效：你的select元素是不是动态生成的？如果是，那直接绑定到select上的事件可能不会触发，这时候需要用事件委托，比如把事件绑定到document上：

  document.addEventListener('change', function(e) {
    if(e.target.id === 'targetSelect') {
      // 上面的逻辑代码
    }
  });
  

• 输入框的id是否正确：确认你的输入框id确实是winback，没有拼写错误（比如写成winBack或者winbak）。

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