disabled元素的值不提交,readonly元素的值正常提交;readonly仅对text、password、textarea有效,select和checkbox等不支持;disabled支持fieldset批量控制且语义更明确。
disabled 和 readonly 的提交行为差异
表单提交时,
元素的值**完全不会出现在
或序列化结果里**,哪怕你用 JS 改了它的
;而
元素的值照常提交。这是最常踩坑的地方:后端收不到字段,排查半天发现前端误用了
。
常见错误现象:
用户填完表单点提交,后端日志显示某个字段为空 → 前端该字段用了
而非
用
或
拿不到值 → 检查是否误加了
使用场景判断:
展示型只读(如预填手机号、订单金额)→ 用
功能锁死(如协议未勾选时禁用提交按钮)→ 用
需要复制内容的只读字段(如 API Key 展示)→ 必须用
,
不支持聚焦和复制
哪些控件支持 readonly?
只对
、
、
有效;
、
、
、
都不支持该属性。
常见错误做法:
给
加
→ 浏览器直接忽略
给 checkbox 写
试图保留选中态但禁编辑 → 无效,必须用
或 JS 拦截
替代方案:
checkbox/radio 若需“视觉只读但保留状态”,可用
+ 隐藏域
补值
只读需求,建议改用
文本模拟,或用 JS 禁用下拉展开
Bootstrap 下的样式与可访问性影响
Bootstrap 会为
和
分别加样式,但语义和辅助技术处理完全不同:
:自动加
,屏幕阅读器会播报“已禁用”,且无法获得焦点
:无
,仍可聚焦、选中、复制,屏幕阅读器按普通输入框播报
容易被忽略的细节:
用 JS 动态设
,比单纯加
更可靠 —— 否则表单序列化、键盘导航、屏幕阅读器都可能失效
能批量禁用内部所有控件,比逐个写
更健壮,也更利于语义表达
自定义 CSS 时避免泛写
,优先用 Bootstrap 的
,否则可能破坏移动端 WebView 的匹配逻辑
打印与高对比度模式下的表现
禁用字段在打印或高对比度模式下容易变灰、变淡甚至不可见,尤其
输入框在 PDF 打印中常变成浅灰色文字,难以辨认。
解决思路:
打印样式里强制重置:
高对比度模式下,
伪类可能被系统样式覆盖,建议同时补充
类选择器兜底
单选/复选框的禁用文本不随控件变灰 → 需单独给
或父容器加样式控制颜色
真正难处理的是跨浏览器一致性:旧版 IE 对
的 focus 行为不统一,若必须兼容,宁可用
+
补值,别赌行为一致。
disabledFormDatavaluereadonlydisableddisabledreadonlyform.serialize()new FormData(form)disabledreadonlydisabledreadonlydisabledreadonlyreadonly="readonly"readonlyreadonlydisableddisableddisabled[readonly]disabledaria-disabled="true"readonlyaria-disabledelement.disabled = trueclass="disabled"disabledinput:disabled.form-control:disableddisabled@media print { input:disabled { color: #000 !important; background: #fff !important; } }:disabled.form-control[disabled]label[for]readonlydisabled