后端收不到字段值是因为用了disabled而非readonly；disabled元素提交时被完全过滤，readonly值照常提交，且readonly支持聚焦、复制，仅禁止编辑。
禁用输入框必须用 disabled，不是 readonly；提交时要确保值不丢失就别用 disabled —— 选错属性，后端收不到数据或前端逻辑崩掉是常态。
为什么表单提交时 input 值突然没了
因为用了 disabled 属性。HTML 规范明确：所有带 disabled 的表单控件（input、select、textarea、button、fieldset）在序列化提交（FormData、form.submit()、serialize()）时会被完全跳过，就像它不存在一样。
常见错误场景：
- 把“只读展示字段”写成
<input value="abc" disabled>，结果后端收不到abc - JS 动态设
el.setAttribute('disabled', 'disabled')后又想用removeAttribute('disabled')启用，但在旧版 Safari 中可能失效 - 给
<div> 或 <code><label></label>加disabled，完全没反应 —— 它只对原生表单元素生效动态控制 disabled 状态的 JS 写法
统一用布尔赋值，别碰
setAttribute或字符串操作：立即学习“前端免费学习笔记（深入）”；
- 禁用：
inputEl.disabled = true - 启用：
inputEl.disabled = false - 判断状态：
if (inputEl.disabled) { ... } - 批量操作推荐用
fieldset：<fieldset disabled> <input name="a"><input name="b"> </fieldset>，子控件自动继承禁用，且 DOM 值保留不丢
注意：
fieldset的disabled在 IE11 下样式支持弱，建议加 CSS 兜底：fieldset[disabled] { opacity: 0.5; }。readonly 和 disabled 到底怎么选
关键看业务意图：
- 需要用户看到、能复制、但不能改，且后端必须收到该值 → 用
readonly（注意 JS 设置是el.readOnly = true，大小写敏感） - 字段纯属占位、与当前流程无关、不该参与提交 → 用
disabled -
readonly对radio/checkbox无效，它们不支持该属性 -
required验证会忽略readonly字段，但不会忽略disabled字段（因为它压根不在提交数据里）
防止重复提交时 button 要怎么禁用
最简方案是直接禁用提交按钮本身：
- HTML：
<button type="submit" id="submitBtn">提交</button> - JS 提交前：
document.getElementById('submitBtn').disabled = true - 成功/失败后务必恢复：
btn.disabled = false，否则用户无法重试 - 禁用期间建议加 loading 状态提示，仅靠
disabled的视觉变化（如灰化）不足以传达“正在处理”
别用
pointer-events: none或opacity模拟禁用 —— 它们不阻止表单提交，也不影响tabindex，可访问性差，且不符合语义。真正容易被忽略的是：禁用状态切换后，DOM 中的值是否还活着。用
disabled不会清空value，但如果你手动调了el.value = ''或重置了表单，那就真丢了 —— 这和disabled无关，是代码逻辑问题。 - 禁用：
