disabled属性对无效，必须逐个为其中的添加disabled才能实现分组禁用效果，且需注意可访问性和ui同步。
disabled 属性对 <optgroup></optgroup> 无效
直接给 <optgroup></optgroup> 标签加 disabled 属性不会禁用其中的 <option></option>，浏览器会忽略它。这是 HTML 规范明确规定的：disabled 只对表单控件元素（如 <input>、<select></select>、<button></button>、<option></option>）生效，<optgroup></optgroup> 不在支持列表中。
必须逐个禁用 <option></option> 才能实现分组禁用效果
要让某个分组“看起来不可选”，只能显式地为该分组下的每个 <option></option> 添加 disabled 属性。浏览器渲染时会自动置灰并阻止选择，视觉和交互上就等效于禁用整个分组。
示例：
<select><optgroup label="活跃用户"> <option value="u1">张三</option> <option value="u2">李四</option> </optgroup> <optgroup label="已停用账户"> <option value="u3" disabled>王五</option> <option value="u4" disabled>赵六</option> </optgroup></select>
- 不能只写
<optgroup label="已停用账户" disabled></optgroup> - 禁用后，这些
<option></option>的值不会随表单提交（即使被选中也不会发送） - JavaScript 动态操作时，也要遍历
optgroup下的option元素，逐一设置disabled = true
用 JavaScript 批量禁用指定 <optgroup></optgroup> 下的所有 <option></option>
如果分组动态生成或需响应用户操作，建议用 JS 定位并批量处理。关键点是：不能靠 querySelector('optgroup[disabled]') 查找——因为该属性本身无意义；得先选中 <optgroup></optgroup>，再查它的子 <option></option>。
示例代码：
const optgroup = document.querySelector('optgroup[label="已停用账户"]');
if (optgroup) {
optgroup.querySelectorAll('option').forEach(opt => {
opt.disabled = true;
});
}
-
optgroup.children不可靠（可能含文本节点），必须用querySelectorAll('option') - 禁用后，记得同步更新 UI 状态（比如添加 CSS 类控制样式），否则仅靠默认置灰可能不够明显
- 若使用框架（如 React/Vue），不要直接操作 DOM，应通过状态驱动
disabled属性
禁用分组时容易忽略的可访问性问题
仅加 disabled 属性会让屏幕阅读器跳过这些 <option></option>，但用户仍可能看到它们、困惑为何无法选择。更稳妥的做法是：结合视觉提示（如灰色文字+斜体）+ 明确文案说明（例如在分组 label 后加 “（不可选）”）。
示例增强写法：
<optgroup label="已停用账户（不可选）"> <option value="u3" disabled>王五</option> <option value="u4" disabled>赵六</option> </optgroup>
- 避免仅依赖
disabled传递业务语义，尤其当禁用逻辑有例外（比如管理员可选）时 - 如果分组完全不该出现，优先考虑服务端过滤或前端条件渲染，而非禁用
- 测试时务必用键盘 Tab + 方向键验证：禁用项是否真的无法聚焦
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
