readonly仅对text类input（如email、date、number）和textarea生效，select、checkbox等无效；其值会提交，disabled则不提交，且readonly仍可聚焦复制。
readonly 属性不是“锁住字段”的万能开关，它只对部分表单元素生效，且行为与 disabled 有本质区别——用错地方会导致数据丢失或交互异常。
哪些 HTML 元素真正支持 readonly
只有用户能直接输入文本的控件才支持 readonly：包括 <input type="text">、<input type="email">、<input type="date">、<input type="number"> 和 <textarea>。
以下写法**完全无效**，浏览器会忽略：
-
<select readonly>——select不支持readonly，必须用disabled -
<input type="checkbox" readonly>或<input type="radio" readonly>—— 这类控件没有“文本输入”语义，readonly无意义 -
<option readonly>——option元素不接受该属性，选中状态仍可被更改
readonly 与 disabled 提交行为差异
关键区别不在视觉上，而在表单提交时的数据是否送达后端：
立即学习“前端免费学习笔记（深入）”；
-
readonly字段的value会随表单一起提交，服务器能收到 -
disabled字段的value**不会提交**，后端收不到，相当于从请求体中被剔除
例如：<input name="user_id" value="123" readonly> 提交后，user_id=123 会出现在 POST 数据里；换成 disabled，这个字段就彻底消失了。
如果你需要“显示但不可改 + 后端必须拿到值”，只能选 readonly；如果只是临时禁用、且不关心该值是否提交，disabled 更安全。
JavaScript 动态控制 readonly 的正确写法
用 jQuery 或原生 JS 修改时，别混淆 .attr() 和 .prop()：
- 移除只读：用
$("input").prop("readonly", false)（推荐）或$("input").removeAttr("readonly") - 设为只读：用
$("input").prop("readonly", true)——.attr("readonly", "readonly")虽然也能工作，但语义不准确，且在某些旧版 jQuery 中可能失效 - 不要写
.attr("readonly", null)或.attr("readonly", "")，这在现代浏览器中不一定清除状态
原生 JS 更直接：el.readOnly = false（注意大小写是 readOnly，不是 readonly）。
容易被忽略的兼容性细节
readonly 元素仍可获得焦点、可被选中、可复制内容——这是它和 disabled 最隐蔽的区别：
- 用户按 Tab 键仍能聚焦到
readonly输入框，而disabled完全跳过 - 用户可用鼠标拖选文字并 Ctrl+C 复制，
disabled下连选择都不行 - 若你希望“禁止一切交互”，仅靠
readonly不够，得配合 CSSpointer-events: none或额外监听focus并blur()
另外，readonly 对 required 属性依然有效：即使只读，字段仍会参与必填校验——如果初始值为空，表单仍会报错。这点常被忽略，尤其在动态填充场景下。
