disabled使下拉框完全禁用且不提交值，是标准行为；select不支持readonly；需“显示不可改但提交值”时应结合pointer-events:none、tabindex="-1"与隐藏域。
HTML下拉框加 disabled 后无法交互是正常行为
给 <select> 元素添加 disabled 属性，浏览器会直接禁用整个控件：不能点击、不能聚焦、不能通过键盘切换选项，且表单提交时该字段值不会被发送。这是标准行为，不是 bug。
disabled 与 readonly 的区别必须分清
<select> 不支持 readonly 属性（设了也无效），只有 disabled 或 JavaScript 模拟只读。常见误操作是写成：
<select readonly> <option value="a">A</option> </select>
这不会产生只读效果，浏览器忽略 readonly。真正可用的方案只有：
-
disabled：完全禁用，值不提交，视觉灰化 - 移除所有
<option>并保留一个空占位项 + CSS 禁止 pointer-events（不推荐，不可靠） - 用 JS 监听
change和click事件并return false（需额外处理键盘焦点）
后端传参时 disabled 字段不提交的应对方式
如果需要“显示但不可改、且仍提交值”，disabled 就不合适。此时应：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
立即学习“前端免费学习笔记（深入）”；
- 去掉
disabled，改用pointer-events: none+tabindex="-1"阻止交互（仅视觉禁用，值照常提交） - 同时加一个隐藏域
<input type="hidden" name="xxx" value="当前选中值">，确保值必传 - 服务端逻辑不要依赖前端是否禁用，而应以权限或业务状态为准做二次校验
例如：
<select name="category" tabindex="-1" style="pointer-events: none;"> <option value="tech" selected>技术</option> </select> <input type="hidden" name="category" value="tech">
用 JavaScript 动态控制 disabled 状态要注意时机
通过 JS 设置 select.disabled = true 是即时生效的，但要注意：
- 若在 DOM 渲染前设置，可能被后续框架（如 Vue/React）覆盖
- 若用
setAttribute('disabled', '')，必须传空字符串或任意真值；传false或'false'仍会被视为启用 - 检查是否禁用请用
select.disabled === true，不要用hasAttribute('disabled')，因为移除属性后 DOM 可能未同步更新
推荐写法：
const sel = document.querySelector('select');
sel.disabled = true; // 启用禁用
sel.disabled = false; // 解除禁用
禁用下拉框看似简单，但关键点在于：你到底要的是「不让用户改」，还是「不让这个字段参与提交」——这两个目标对应完全不同的实现路径，混用就会出问题。 
