直接加readonly属性即可生效，它是布尔属性，存在即只读、不存在即可编辑；readonly字段值会提交，disabled则完全过滤不提交；仅对text类input和textarea有效，select等元素需替代方案。
直接加 readonly 属性就行，但加错位置、写错形式、混用 disabled，后端就收不到值——这不是“差不多”，是“根本没提交”。
怎么写才真正生效？别写成字符串
readonly 是布尔属性，不是字符串开关。只要存在，就只读；不存在，就可编辑。浏览器不看它的值。
- ✅ 正确：
<input type="text" value="U-123" name="order_id" readonly> - ⚠️ 不推荐：
<input readonly>或<input readonly>—— 虽然多数浏览器认，但 HTML5 规范不要求值，校验工具可能报 warning - ❌ 错误：
<input readonly>—— 这个false完全没用，只要写了readonly，就只读
readonly 和 disabled 到底该用哪个？看后端要不要这个值
表单提交时，readonly 字段的 name 和 value 会进请求体；disabled 的字段压根不会出现。
- 需要用户看到、能复制、后端必须收到 → 用
readonly - 字段临时不可用、不参与业务逻辑、也不希望它出现在请求里 → 用
disabled - 别同时写：
disabled优先级更高，readonly被无视，且字段彻底消失
哪些元素支持 readonly？写了也白写的常见情况
readonly 只对可编辑文本控件有效，不是所有表单元素都认它。
- ✅ 支持：
<input type="text">、<input type="email">、<input type="date">（现代浏览器）、<textarea></textarea> - ❌ 无效：
<select readonly></select>（Chrome/Firefox 忽略，Safari 行为不一致）、<input type="checkbox" readonly>、<input type="radio" readonly>、<button readonly></button> - 替代方案：
<select></select>改用<input type="text" readonly>模拟；checkbox/radio需配合disabled+ 同名<input type="hidden">补值
JS 动态控制只读状态，为什么 el.readOnly = false 有时不灵？
旧版 Safari（≤15）对 el.readOnly = false 响应不稳定，更稳妥的是操作 DOM 属性本身。
- 设为只读：
el.setAttribute('readonly', 'readonly')或el.readOnly = true - 解除只读：
el.removeAttribute('readonly')（比el.readOnly = false更可靠） - 检查状态别用
el.hasAttribute('readonly')—— 返回字符串或 null，应直接读el.readOnly（布尔值） - React 中必须写
readOnly={isLocked}（驼峰，小写 o 大写 O），写readonly会警告且无效
最易被忽略的点：readonly 是纯前端交互提示，删掉属性、粘贴覆盖、控制台改值，浏览器照发。后端必须校验该字段是否被篡改，不能只信前端限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
