直接为标签添加disabled属性可使其不可选但保留在dom中；select元素加disabled则整个下拉框冻结；js中应通过option.disabled布尔属性读写状态，避免使用getattribute；禁用项不参与表单提交且被屏幕阅读器差异化播报。
如何让下拉框中的某几个选项不可选
直接给 <option></option> 标签加 disabled 属性即可。它会让该选项变灰、无法被鼠标点击或键盘选中，但依然保留在 DOM 中——这点和 hidden 或 CSS display: none 有本质区别。
常见错误是误以为加了 disabled 就能“隐藏”选项，结果发现它还在下拉列表里占位、只是点不动。如果目标是彻底移除显示，得用 JS 删除节点或服务端过滤。
-
<option value="2" disabled>已停用套餐</option>—— 用户能看到但无法选择 - 禁用项在表单提交时不会被包含（
name=value不会出现在 POST 数据里） - 移动端 Safari 对
disabled的视觉反馈较弱，建议搭配style="color: #999;"增强可读性
为什么 select 元素本身 disabled 后整个下拉框都不可用
给 <select></select> 加 disabled，效果是整个控件置灰、无法展开，所有选项一并失效。这和只禁用部分 <option></option> 完全不同：前者是控件级禁用，后者是选项级禁用。
容易混淆的场景：用户想“暂时不让选 A 和 B”，却给整个 <select></select> 加了 disabled，导致连 C、D 也选不了。正确做法是只对特定 <option></option> 设置 disabled。
-
<select disabled></select>→ 整个下拉框冻结，包括默认值也无法修改 -
<option disabled></option>→ 仅该条目不可选，其他仍可操作 - 两者可共存：一个
<select disabled></select>下的所有<option></option>都自动失效，哪怕没写disabled
disabled 状态在 JS 中怎么判断和控制
JS 里通过 option.disabled 属性读取状态，赋值 true/false 可动态切换。注意：修改后浏览器会立即更新 UI，无需手动触发重绘。
别用 getAttribute('disabled') 判断——它返回字符串 "" 或 null，语义模糊；应始终用属性访问方式。
document.querySelector('option[value="3"]').disabled = true;-
if (myOption.disabled) { ... }—— 返回布尔值，可靠 - 禁用状态不影响
option.value或option.textContent的读取 - 设置
disabled = false后，该选项立刻可选，无需刷新下拉框
兼容性和无障碍注意事项
所有现代浏览器都支持 <option disabled></option>，但屏幕阅读器对它的播报行为不一致：部分只读“已禁用”，部分完全跳过。如果涉及关键业务逻辑（比如“此选项已过期”），建议在 text 中显式说明，而不是依赖 disabled 视觉暗示。
<option value="expired" disabled>【已过期】VIP 年费套餐</option>- 避免仅靠颜色区分禁用状态（色盲用户难识别），文字标注更稳妥
- Chrome 和 Firefox 在键盘导航时会跳过
disabled选项；Edge 旧版本曾有跳过失败的问题，现已修复
selectedIndex 计算，但不会出现在 selectedOptions 集合里。如果用循环遍历 select.options 做逻辑判断，记得先检查 option.disabled。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
