跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

disabled属性和readonly区别_表单禁用状态对比【详解】

disabled元素的值不提交,readonly元素的值正常提交;readonly仅对text、password、textarea有效,select和checkbox等不支持;disabled支持fieldset批量控制且语义更明确。 disabled 和 readonly 的提交行为差异 表单提交时,
disabled
元素的值**完全不会出现在
FormData
或序列化结果里**,哪怕你用 JS 改了它的
value
;而
readonly
元素的值照常提交。这是最常踩坑的地方:后端收不到字段,排查半天发现前端误用了
disabled
。 常见错误现象: 用户填完表单点提交,后端日志显示某个字段为空 → 前端该字段用了
disabled
而非
readonly
用
form.serialize()
或
new FormData(form)
拿不到值 → 检查是否误加了
disabled
使用场景判断: 展示型只读(如预填手机号、订单金额)→ 用
readonly
功能锁死(如协议未勾选时禁用提交按钮)→ 用
disabled
需要复制内容的只读字段(如 API Key 展示)→ 必须用
readonly
,
disabled
不支持聚焦和复制 哪些控件支持 readonly?
readonly
只对
、
、