readonly属性的作用_HTML readonly与disabled区别全景分析

readonly仅对input和textarea有效，select、button、checkbox等忽略该属性；disabled字段不参与表单提交；readonly支持复制，disabled不支持；React中须用readOnly={布尔值}，Vue中:readonly对select无效。

readonly 属性只对 input 和 textarea 有效

它在 select、button、checkbox 上完全无效，浏览器会直接忽略。比如写 <select readonly>，下拉框依然可点可选；<input type="checkbox" readonly> 也不会阻止勾选。这是 HTML 规范决定的，不是浏览器 bug。若需“只读下拉”，得用 JS 禁用所有 option，或换成纯文本展示。

表单提交时 disabled 字段压根不进请求体

这是最常导致后端收不到数据的硬伤。比如：

<input name="order_id" value="ORD-789" readonly><br><input name="status" value="pending" disabled>

提交后，后端只能收到 order_id=ORD-789，status 字段彻底消失。即使你在 JS 里执行了 el.value = 'done'，也无济于事。需要“禁用但提交”时，必须配一个同名 <input type="hidden">，并确保它的值与可见字段同步。

用户能否复制内容？这决定了该用哪个属性

如果字段展示的是订单号、API Key、计算结果等需用户手动复制的信息，readonly 是唯一选择——它支持聚焦、双击选中、Ctrl+A、Ctrl+C；而 disabled 下连鼠标点击都无效，更别说复制。但注意：readonly 默认不灰化、不加视觉提示，建议补一句 CSS：input[readonly] { background-color: #f5f5f5; cursor: not-allowed; }。

立即学习“前端免费学习笔记（深入）”；

React/Vue 中绑定 readOnly 容易写错大小写和类型

React 要求用驼峰写法 readOnly（不是 readonly），且必须传布尔值：readOnly={isLocked}；若写成 readonly={true}，JSX 会当字符串属性处理，浏览器误判为存在即真，导致只读态恒生效。Vue 中 :readonly="true" 对 <select> 无效，但开发者常误以为它通用。框架里别图省事混用，该用 disabled 的地方就用，该用 readOnly 的地方就严格按规范来。

真正难调试的，是那些“看起来能提交、实际被过滤掉”的字段——它们往往藏在复杂表单深处，且只在特定流程分支里被设为 disabled，测试时容易漏掉提交验证环节。