加了 disabled 却没变灰的常见原因有：dom 未就绪、错误使用 setattribute、当前选中项被禁用仍显示、自定义 css 覆盖默认样式；正确做法是 dom 就绪后直接赋布尔值 disabled = true。
option 元素的 disabled 属性一加上就会自动置灰，不需要额外样式；但动态设置时容易因 DOM 时机、选中状态或浏览器行为导致视觉/功能不一致。
为什么加了 disabled 却没变灰？
常见原因不是属性没生效，而是：
– 页面还没加载完就操作了 option，select.options 还是空的
– 用了 setAttribute('disabled', 'true') 这种写法，虽然部分浏览器兼容，但语义错误，且后续读取 option.disabled 会返回 undefined
– 当前选中的 option 恰好是刚被禁用的那个，浏览器仍显示它（只是无法再切换过去），造成“没灰”的错觉
– 自定义 CSS 覆盖了默认灰度，比如写了 select option { color: black; } 却没配 :disabled 状态
动态设置 option.disabled 的正确写法
必须等 DOM 就绪后操作，且直接赋布尔值：
-
document.getElementById('mySelect').options[2].disabled = true;✅ -
Array.from(select.options).forEach(opt => { if (opt.value === 'admin') opt.disabled = true; });✅（避免实时 HTMLCollection 遍历时索引错乱） -
select.querySelector('option[value="admin"]').disabled = true;✅（更语义化） - 不要用
setAttribute('disabled', '')或setAttribute('disabled', 'disabled')❌
禁用后用户还能看到、聚焦，怎么处理？
这是 disabled 的标准行为：它只禁交互、不隐藏、不移除 DOM。如果需要更强控制：
- 想彻底不让键盘 Tab 到该选项？不能靠
disabled—— 它仍可被聚焦（尤其在某些旧版 Chrome 中）。得配合tabindex="-1"，但注意这不属于标准方案，且可能影响无障碍 - 想让禁用项完全不可见？改用
display: none，但要清楚：它会让该option从select.options集合中消失，JS 逻辑需同步调整 - 禁用的是首项且带
selected？务必确认value=""，否则表单提交可能带空值，后端校验容易漏
真正要注意的不是“怎么让它灰”，而是“禁用后用户是否还能意外提交非法值”——disabled 只作用于前端 UI，后端必须重新校验提交的 value 是否在允许范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
