是，readonly字段的值会随表单提交；disabled则完全不提交。readonly仅适用于text/password/email/number/textarea，对checkbox等无效；它允许聚焦、复制，且不改变样式，而disabled禁用所有交互并置灰，适用于所有表单元素。
readonly 属性确实能让 变成只读，但它的行为和 disabled 有本质区别——表单提交时，readonly 字段的值仍会发往服务器，而 disabled 不会。这点常被忽略，直接导致后端收不到预期数据。
为什么 readonly 不生效？常见原因排查
多数时候不是属性写错了，而是被其他逻辑覆盖或误解了适用范围：
-
readonly只对、、、和有效；对checkbox、radio、file、button等无效（浏览器会忽略） - JavaScript 动态设置时写成
input.readonly = true是对的，但写成input.setAttribute('readonly', 'true')会出问题——只要存在该属性（哪怕值是""或"false"），浏览器就视为只读；正确写法是input.setAttribute('readonly', '')或input.readOnly = true（注意大小写） - CSS 里用
pointer-events: none或user-select: none不能替代readonly，它们只禁交互/选中，不阻止键盘输入或表单提交
readonly 和 disabled 到底怎么选？
关键看两点：是否要提交值 + 是否要保持样式/可聚焦：
- 需要提交值 → 必须用
readonly（例如审核页展示用户原填手机号，不允许改但必须传给后端） - 不需要提交值，且希望视觉上“灰掉”+ 失焦 → 用
disabled（例如流程未到步骤时禁用邮箱字段） - 想保留样式（比如背景色、边框）又不让改 →
readonly更稳妥；disabled会触发浏览器默认禁用样式，且focus()失败 - Vue/React 中绑定
v-model或value时，readonly字段仍响应式更新，disabled则可能中断双向绑定逻辑
动态控制只读状态的实用写法
避免硬编码，用 JS 控制更灵活。注意 DOM 更新时机和事件监听：
// 正确：直接操作 property（推荐）
document.getElementById('username').readOnly = true;
// 正确：移除属性即取消只读
input.removeAttribute('readonly');
// 错误：setAttribute 传字符串 'false' 依然只读
input.setAttribute('readonly', 'false'); // ❌ 无效
// 配合表单验证：提交前检查只读字段是否被绕过篡改（服务端必须二次校验！）
if (input.readOnly && input.value !== originalValue) {
console.warn('只读字段值被前端篡改');
}
真实项目里，readonly 常和 data-* 属性配合使用，比如 data-locked="true" 来标记业务层锁定状态，避免和 DOM 层只读语义混淆。
别忘了：所有前端限制都可被绕过，readonly 仅用于提升用户体验和防误操作，关键字段的合法性必须由后端验证兜底。
