在上添加disabled布尔属性即可合法禁用单个下拉选项，如上海（暂不可选）；禁止赋值（如disabled="true"）、禁用整个或使用readonly均属错误用法。
直接在 <option></option> 上加 disabled 属性，就能禁用单个下拉选项——它会变灰、不可点、不响应键盘方向键，且表单提交时完全忽略其值。
怎么写才是合法有效的 disabled
disabled 是布尔属性，只写名字就生效，不要赋值：
- ✅ 正确：
<option value="sh" disabled>上海（暂不可选）</option> - ❌ 错误：
<option value="sh" disabled></option>或disabled="false"—— 后者也生效，因为只要存在就禁用 - ❌ 错误：
<select disabled></select>—— 这是禁用整个下拉框，不是单个选项 - ❌ 错误：
<option readonly></option>——<option></option>不支持readonly，浏览器直接忽略
禁用项被设为 selected 会发生什么
如果一个 <option disabled selected></option> 在页面加载时被默认选中，多数浏览器会视觉上显示它，但用户无法手动切换到它；更麻烦的是：用户没做任何操作就直接提交表单，后端可能收不到有效值（比如空字符串或上一个历史值），导致校验失败或逻辑错乱。
- 推荐做法：用一个无业务含义的引导项，如
<option value="" selected disabled>-- 请选择 --</option> - 后端必须校验
value非空，不能依赖前端“看起来选了” - 如果业务要求某项默认禁用且不可选，就别给它
selected，而是在 JS 中主动设置一个有效项为selected
用 JavaScript 动态控制 option.disabled 的注意事项
JS 可以随时改 option.disabled，但容易踩坑：
- DOM 必须加载完成再操作，否则
document.getElementById('mySelect').options可能是undefined - 不要只改
options[2].disabled = true就完事——如果当前选中项恰好是它，得同步调用select.selectedIndex = 0或设另一个有效项的selected = true -
select.options是实时 HTMLCollection，遍历时修改可能出错；建议先转数组：Array.from(select.options).forEach(...) - 禁用后无需触发事件或重绘，浏览器自动更新样式和交互行为
最常被忽略的一点：disabled 对 <optgroup></optgroup> 也有效，但浏览器支持度不一；若需禁用整组，稳妥做法仍是遍历内部所有 <option></option> 单独设 disabled。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
