在<option>标签中添加disabled属性即可禁用单个下拉选项，使其置灰、不可点击和键盘选择，且提交时忽略其值；该属性为布尔型，存在即生效，不可赋值如disabled="false"，也不应加在<select>上。
直接在 <option> 上加 disabled 属性就行
禁用下拉菜单里的某一项，不需要 JS、不用改 <select>，只要在对应 <option> 标签里写上 disabled 就生效。浏览器会自动把它置灰、跳过键盘方向键导航、阻止鼠标点击，而且表单提交时完全忽略它的 value。
常见错误现象：
- 写了
disabled="false"或disabled="0"—— 这些没用，disabled是布尔属性，存在即禁用 - 误加在
<select disabled>上 —— 那是整个下拉框不可用，不是单个选项 - 试图用
readonly——<select>和<option>不支持该属性
正确写法示例：
<select name="status"> <option value="">-- 请选择 --</option> <option value="active">启用</option> <option value="pending" disabled>待审核（暂不可选）</option> <option value="disabled">已停用</option> </select>
<option disabled> 和 <select disabled> 别混用
两者作用范围完全不同，但可以共存。比如你只想禁用“上海”这个城市选项，而其他城市仍可选，那就只动 <option value="sh" disabled>；如果整个下拉框要锁死（比如数据加载中），才用 <select disabled>。
立即学习“前端免费学习笔记（深入）”；
关键区别：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<select disabled>：整个控件不可聚焦、不可展开、所有选项都失效，视觉上整体变灰 -
<option disabled>：下拉框照常展开和操作，只是该条目不可点、不可键盘选中，也不参与提交 - 若两者同时存在，
<select disabled>优先级更高，<option disabled>的状态会被覆盖（但 DOM 属性仍保留）
禁用项不能带 selected，否则后端可能收不到值
如果某个 <option disabled selected> 在页面加载时被默认选中，多数浏览器会跳过它、不设为实际选中值——但行为不统一，有的显示灰色文字、有的回退到第一个可用项、有的甚至让表单提交空字符串。这容易导致后端校验失败或逻辑错乱。
安全做法是：
- 用一个无业务含义的引导项作默认值：
<option value="" disabled selected>-- 请选择状态 --</option> - 确保该
value是空字符串或明确标识符（如"_prompt_"），且后端拒绝这种值 - 避免把有真实业务 value 的选项同时设为
disabled和selected
JavaScript 动态控制 option.disabled 要注意时机和副作用
运行时启用/禁用选项，必须操作 DOM 元素的 disabled 属性，而不是用 setAttribute。后者在部分旧浏览器中可能不触发 UI 更新。
典型安全写法：
const select = document.getElementById('mySelect');
if (select) {
const targetOpt = Array.from(select.options).find(opt => opt.value === 'pending');
if (targetOpt) {
targetOpt.disabled = true; // 启用则赋 false
// 如果当前选中值恰好是这个被禁选项，主动切换
if (select.value === 'pending') {
select.value = 'active'; // 设为下一个有效值
}
}
}容易踩的坑：
- DOM 未就绪就操作 —— 必须等
DOMContentLoaded或把脚本放</body>前 - 只改
disabled状态，不处理已选中的值 —— 用户可能正停留在被禁选项上，提交时出错 - 遍历
select.options时直接修改，因它是实时 HTMLCollection，建议先转成数组
最麻烦的地方其实是状态同步：前端禁用了某项，后端是否也做了对应校验？用户绕过 JS 直接改 HTML 提交怎么办？这些得靠服务端兜底，不能只信前端的 disabled。
