readonly的值会随表单提交，disabled的值则完全不提交；前者可聚焦、复制，后者不可交互且置灰，且disabled对所有表单元素生效而readonly仅适用于text/password/textarea。
能，readonly 的值会随表单提交；disabled 的值则完全不会出现在提交数据中。这是最常被误判的核心点——选错属性，后端就收不到那个字段的值。
表单提交时，readonly 和 disabled 的实际行为差异
浏览器在序列化表单（比如 form.submit() 或原生提交）时，只包含 name 属性存在且未被 disabled 的控件。而 readonly 不影响参与序列化。
-
readonly：字段可聚焦、可复制、可选中，值照常提交 —— 适合“展示+需回传”的场景，如订单号、用户 ID -
disabled：字段无法交互、不接收焦点、键盘/鼠标事件被拦截，值从提交 payload 中彻底剔除 —— 适合“临时屏蔽且不参与业务流”的控件，如未勾选协议时的提交按钮 - 若同时设置
readonly和disabled，disabled优先级更高，readonly被忽略
readonly 为什么对 <select>、<checkbox> 没反应？
HTML 规范明确限定：readonly 只对 <input type="text">、<input type="password">、<textarea> 生效；其他控件（包括 <select>、<input type="radio">、<button>）会直接忽略该属性，既不生效也不报错。
- 想让
<select>“只读但提交”，只能用 JS 拦截change事件 + 保持value不变，或改用disabled+ 配合<input type="hidden">补值 -
<input type="checkbox">设readonly后仍可点击切换状态 —— 它根本不识别这个属性 - 框架里（如 Vue/React）动态绑定时更易踩坑：Vue 写
:readonly="true"对<select>无效；React 必须用readOnly（驼峰），写成readonly={true}会被当字符串处理
JS 修改 readonly 元素的值，会影响提交吗？
会。HTML 层面的 readonly 是纯 UI 约束，不阻止 JS 赋值；只要元素有 name 且没被 disabled，它的当前 value 就会提交。
立即学习“前端免费学习笔记（深入）”；
-
document.querySelector('input').value = 'new-value';—— 提交时就是new-value - 但注意：如果服务端依赖该字段不可变（比如防篡改校验），仅靠
readonly完全不可信，必须配合后端验证 - 某些表单验证库（如 Yup、Zod）默认校验
readonly字段，但跳过disabled字段 —— 这可能造成前端校验通过、后端拒绝的错觉
需要“禁用视觉 + 提交值”，该怎么做？
没有标准 HTML 属性能同时满足；必须组合实现。最稳妥的方式是：disabled 控件 + 同名 <input type="hidden">。
- 例如：
<input type="text" name="user_id" value="123" disabled><input type="hidden" name="user_id" value="123"> - 用 CSS 模拟禁用感：
input[readonly] { background: #f5f5f5; cursor: not-allowed; }，但别忘了加tabindex="-1"防止键盘聚焦干扰 - SSR 场景下尤其注意：服务端渲染出
disabled，客户端 JS 却没同步更新 hidden 字段，会导致提交值为空或旧值 —— 这类不一致很难 debug
真正容易被忽略的是：表单验证逻辑、无障碍支持、框架绑定方式、以及 SSR 与客户端状态的一致性——这些地方出问题，往往比属性写错更难定位。
