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 只对 <input type="text">、<input type="password">、<textarea></textarea> 有效；<select></select>、<input type="checkbox">、<input type="radio">、<button></button> 都不支持该属性。
常见错误做法：
- 给
<select disabled></select>加readonly="readonly"→ 浏览器直接忽略readonly - 给 checkbox 写
readonly试图保留选中态但禁编辑 → 无效，必须用disabled或 JS 拦截
替代方案：
- checkbox/radio 若需“视觉只读但保留状态”，可用
disabled+ 隐藏域<input type="hidden">补值 -
<select></select>只读需求，建议改用<input readonly>文本模拟，或用 JS 禁用下拉展开
Bootstrap 下的样式与可访问性影响
Bootstrap 会为 disabled 和 [readonly] 分别加样式，但语义和辅助技术处理完全不同：
-
disabled：自动加aria-disabled="true"，屏幕阅读器会播报“已禁用”，且无法获得焦点 -
readonly：无aria-disabled，仍可聚焦、选中、复制，屏幕阅读器按普通输入框播报
容易被忽略的细节：
- 用 JS 动态设
element.disabled = true，比单纯加class="disabled"更可靠 —— 否则表单序列化、键盘导航、屏幕阅读器都可能失效 -
<fieldset disabled></fieldset>能批量禁用内部所有控件，比逐个写disabled更健壮，也更利于语义表达 - 自定义 CSS 时避免泛写
input:disabled，优先用 Bootstrap 的.form-control:disabled，否则可能破坏移动端 WebView 的匹配逻辑
打印与高对比度模式下的表现
禁用字段在打印或高对比度模式下容易变灰、变淡甚至不可见，尤其 disabled 输入框在 PDF 打印中常变成浅灰色文字，难以辨认。
解决思路：
- 打印样式里强制重置：
@media print { input:disabled { color: #000 !important; background: #fff !important; } } - 高对比度模式下，
:disabled伪类可能被系统样式覆盖，建议同时补充.form-control[disabled]类选择器兜底 - 单选/复选框的禁用文本不随控件变灰 → 需单独给
label[for]或父容器加样式控制颜色
真正难处理的是跨浏览器一致性：旧版 IE 对 readonly 的 focus 行为不统一，若必须兼容，宁可用 disabled + <input type="hidden"> 补值，别赌行为一致。
