直接在 option 标签写 disabled（无值、不加引号）即可禁用该选项，使其变灰、不可选、不提交；错误写法如 disabled="false" 无效，因 disabled 是布尔属性；禁用 select 会冻结整个下拉框，与禁用单个 option 本质不同。
怎么给 option 加 disabled 属性
直接在目标 option 标签里写 disabled 就行，不用赋值，也不用加引号。浏览器一见到这个属性名就立刻禁用该选项：它变灰、无法点击、键盘上下键跳过、提交时完全不发它的 value。
常见错误是写成：disabled="false" 或 disabled="0"——这些都无效，disabled 是布尔属性，只要存在就生效。
正确示例：
<select name="plan"> <option value="" disabled selected>-- 请选择套餐 --</option> <option value="basic">基础版</option> <option value="pro" disabled>专业版（已下架）</option> <option value="enterprise">企业版</option> </select>
注意：disabled 的 option 仍保留在 DOM 中，只是不可选——别指望它“消失”，要隐藏就得删节点或服务端过滤。
立即学习“前端免费学习笔记（深入）”；
为什么不能对 select 加 disabled 来禁止单个选项
给整个 select 加 disabled，效果是整个下拉框冻结：不能展开、不能聚焦、所有选项一并失效。这不是“禁用某几个”，而是“全部锁死”。
典型误用场景：
- 用户想“只不让选 A 和 B”，却给
<select disabled>加了属性 → C 和 D 也点不了 - 后端返回了动态数据，前端 JS 本该只禁用特定
option，结果错改了select.disabled = true
记住：控件级禁用（select）和选项级禁用（option）是两回事，不能混用。
JS 动态控制 option.disabled 的坑点
用 JavaScript 切换单个选项的禁用状态，必须用 option.disabled = true/false，而不是 setAttribute('disabled', '') 或 removeAttribute('disabled')——后者语义模糊，某些浏览器 UI 不刷新。
关键注意事项：
- 操作前确保 DOM 已加载，比如放在
DOMContentLoaded事件里，否则select.options可能是undefined - 如果当前选中项恰好被你设为
disabled = true，浏览器不会自动切换到其他有效项，得手动处理：select.value = 'valid-value' - 批量遍历时别直接用
select.options.forEach，它是实时 HTMLCollection；先转数组：Array.from(select.options)
安全写法示例：
const select = document.getElementById('planSelect');
if (select) {
Array.from(select.options).forEach(opt => {
if (opt.value === 'pro') opt.disabled = true;
});
// 如果当前值是 'pro'，主动重置
if (select.value === 'pro') select.value = 'basic';
}移动端和无障碍容易被忽略的问题
移动端 Safari 对 option disabled 的视觉反馈很弱——选项照样显示，但只是“点不动”，用户可能以为是 bug。建议显式加样式增强可读性：style="color: #999;" 或通过 CSS 类统一控制。
屏幕阅读器播报不一致：有的读“已禁用”，有的直接跳过。如果业务逻辑关键（比如“此套餐已停售”），不能只靠 disabled 视觉暗示，得把状态写进文本里，例如：<option value="legacy" disabled>旧版套餐（已停售）</option>。
最后强调一点：禁用不影响 option.value 或 option.textContent 的读取，JS 里随时能拿到，但表单提交时它就是不存在的——这点后端校验必须同步跟上，前端禁用纯属提示，不是安全边界。
