disabled字段不参与表单提交，FormData、serialize和submit均忽略其值；readonly仅对文本类控件生效，且支持焦点与复制；二者不可共用，disabled优先级更高。

disabled字段压根不进 FormData 或 form.submit()

后端收不到值，不是接口问题，是浏览器根本没把它塞进请求体。只要元素带 disabled 属性，哪怕 DOM 里 value="abc" 清晰可见，new FormData(form)、form.serialize()、原生 form.submit() 全部无视它——连键名都不生成。

常见翻车现场：

• → 后端用 request.getParameter("order_id") 拿到 null
• 用 jQuery 的 $("form").serialize()，结果字符串里压根没有 order_id=1001
• 调试时 console.log 该 input 的 value 是对的，但 network tab 里 request payload 就是空的

readonly 字段值照常提交，但仅限特定控件

readonly 不是“万能只读开关”，它只对 、、、 生效。其他控件加了也白加：

• → 浏览器直接忽略，下拉框仍可点选
• → 无法阻止勾选/取消
• → 完全无效，按钮照点

想让 select 只读？要么换成 模拟，要么 JS 控制每个 。

MachineLearningMastery

MachineLearningMastery是一款AI学习资源工具，免费在线的机器学习平台，提供从基础到高级全面教程。

下载

JS 动态切换时 readonly 和 disabled 的写法陷阱

静态写 HTML 很直观，但 JS 切换状态容易踩坑：

• 设 disabled：安全写法是 el.disabled = true 或 el.disabled = false
• 设 readonly：别用 el.readOnly = false（旧版 Safari 不响应），改用 el.removeAttribute('readonly') 启用，el.setAttribute('readonly', '') 禁用
• 千万别同时写 disabled 和 readonly —— disabled 优先级更高，readonly 形同虚设，还掩盖逻辑意图
• disabled 元素的 value 属性仍可读写，但 UI 不刷新；readonly 元素修改 value 会立即反映在界面上

聚焦、复制、无障碍支持差异直接影响可用性

这不是“体验加分项”，而是功能刚需：

• readonly 允许：Tab 键切入、.focus() 成功、双击选中、Ctrl+A 全选、Ctrl+C 复制、监听 focus 事件
• disabled 彻底阻断：Tab 跳过、.focus() 静默失败、无法选中或复制、:focus CSS 伪类无效、屏幕阅读器跳过该元素
• 展示 API Key、手机号、调试 ID 这类需复制的字段，必须用 readonly；而禁用提交按钮、锁定整个
  ，必须用 disabled

最常被忽略的点：表单状态切换时，焦点管理没跟上。比如从编辑态切到只读态，用户正聚焦在 input 上，它变成 readonly 后仍保持焦点，但按 Tab 会跳过它；切到 disabled 态则自动失焦，若后续可聚焦元素不合理，键盘导航就断了。