直接给<option>加disabled属性是禁用单个下拉选项最标准、最可靠的方式，它使选项置灰不可交互但保留在DOM中且不参与表单提交；禁用项不可设为默认选中，应改用空value+disabled+selected的引导性选项，并配合后端校验。
直接给 <option> 加 disabled 属性就行
禁用单个选项最标准、最可靠的方式，就是直接在对应 <option> 标签里写 disabled。它不是字符串或布尔值赋值，而是纯布尔属性——只要存在，就生效。
常见错误包括：
- 写成 disabled="false" 或 disabled="0" —— 这些完全无效
- 把 disabled 加到 <select> 上 —— 那是禁用整个下拉框，不是单个选项
- 试图用 readonly —— <select> 和 <option> 都不支持该属性，写了也无反应
正确示例：
<select name="status"> <option value="" selected disabled>-- 请选择状态 --</option> <option value="active">启用</option> <option value="pending" disabled>审核中（暂不可选）</option> <option value="closed">已关闭</option> </select>
disabled 选项仍显示但不提交，别误以为它被“隐藏”了
disabled 的 <option> 会保留在 DOM 中，视觉上置灰、不可点击、无法通过键盘（如方向键）聚焦或选中——但它依然出现在下拉列表里，占位、可读、只是不能交互。
如果你的目标是“彻底不让用户看到某项”，disabled 不是解决方案，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 服务端过滤：渲染前就不返回该选项
- JS 删除节点：
select.remove()或select.removeChild() - 用 CSS
display: none—— 但部分浏览器（如 Safari）对<option>的样式支持极弱，且违反语义，屏幕阅读器可能跳过
注意：移动端 Safari 对 disabled 的视觉反馈偏弱，建议加内联样式增强可读性，比如 style="color:#999;"。
JavaScript 动态设置 option.disabled 要避开几个坑
用 JS 控制禁用状态可行，但容易出错的关键点集中在时机、范围和状态同步上：
- 必须等 DOM 加载完成再操作，否则
document.getElementById('mySelect').options可能为undefined - 不要只改
option.disabled = true，还要检查当前选中项是否恰好是这个被禁用的选项；如果是，应主动切换到其他有效项，避免表单提交时拿到无效值 -
select.options是实时 HTMLCollection，遍历时若动态修改，可能跳过或重复；推荐先转成数组：Array.from(select.options) - 读写状态请用
option.disabled布尔属性，而不是option.getAttribute('disabled')—— 后者返回""或null，判断逻辑易错
安全写法示例：
const select = document.getElementById('roleSelect');
if (select) {
Array.from(select.options).forEach(opt => {
if (opt.value === 'admin') {
opt.disabled = true;
if (select.value === 'admin') {
select.selectedIndex = 0; // 回退到首项
}
}
});
}禁用项带 selected 是危险操作
如果一个 <option disabled> 同时有 selected，页面加载时它会被高亮显示，但用户无法手动选中它——看似合理，实则埋雷：
用户没做任何操作就提交表单，后端可能收到空值、上一个有效值，或依赖浏览器行为的不确定结果，极易引发校验失败或业务逻辑错乱。
稳妥做法是用一个「引导性选项」替代：
- value 为空字符串：
value="" - 同时加
disabled和selected - 文字明确提示，如
-- 请选择 --或请选择角色 - 后端必须校验该空值并拒绝，不能仅靠前端限制
真正复杂的点从来不在怎么加 disabled，而在于：它不触发 change 事件、不参与提交、不被屏幕阅读器当作可选项目播报——这些隐性行为，决定了你是否需要配套的 JS 状态同步或后端兜底校验。
