readonly仅对input和textarea有效，select、button、checkbox等忽略该属性；disabled字段不参与表单提交；readonly支持复制，disabled不支持；react中须用readonly={布尔值}，vue中:readonly对select无效。
readonly 属性只对 input 和 textarea 有效
它在 select、button、checkbox 上完全无效，浏览器会直接忽略。比如写 <select readonly></select>，下拉框依然可点可选；<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></select> 无效，但开发者常误以为它通用。框架里别图省事混用，该用 disabled 的地方就用，该用 readOnly 的地方就严格按规范来。
真正难调试的，是那些“看起来能提交、实际被过滤掉”的字段——它们往往藏在复杂表单深处，且只在特定流程分支里被设为 disabled，测试时容易漏掉提交验证环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
