直接写disabled属性即可禁用输入框，如<input type="text" disabled>；disabled="false"等写法无效，存在即禁用；JS应统一用element.disabled = true/false控制，不可用setAttribute或removeAttribute；disabled字段不提交，readonly才提交值。
直接写 disabled 属性就能禁用，但写法有坑
只要在 <input> 标签里加上 disabled 这个属性，浏览器就会让它变灰、失焦、无法输入，且表单提交时完全不带它的值。写法就一行：<input type="text" disabled>。
常见错误是加了值，比如 disabled="false" 或 disabled="0"——没用。只要属性存在，就禁用；删掉整个属性，才启用。XHTML 风格的 disabled="disabled" 虽然能用，但纯属冗余，现代 HTML5 不需要。
element.disabled = true 是 JS 控制的唯一推荐方式
别用 setAttribute('disabled', 'disabled') 或 removeAttribute('disabled')，尤其在 Safari 旧版本里，removeAttribute 后再设 disabled = true 可能失效。
正确做法统一走 DOM 属性赋值：
立即学习“前端免费学习笔记（深入）”；
-
inputEl.disabled = true—— 禁用 -
inputEl.disabled = false—— 启用 -
if (inputEl.disabled) { ... }—— 检查状态，返回布尔值
这个写法和 HTML 中声明式行为完全一致，兼容性好，也避免了属性/属性值混用导致的逻辑错乱。
disabled 和 readonly 不是同一件事，选错就丢数据
这是最容易踩的坑：如果只是想“显示固定内容但不让用户改”，又**必须让后端收到这个值**，那一定不能用 disabled。
关键区别：
-
disabled：字段从表单数据中彻底消失，FormData、form.serialize()、原生 submit 都不含它 -
readonly：用户不能输，但可聚焦、可复制、可选中，且值照常提交 -
type="checkbox"或type="radio"不支持readonly，只能用disabled
典型反例：登录页把用户名框设成 disabled，后端收不到 username 字段——其实该用 readonly。
禁用后样式和可访问性容易被忽略
浏览器默认把 disabled 元素变灰、降透明度，但这不是强制标准，不同 UA 渲染可能不一致。要用 CSS 主动控制：
- 推荐用
input:disabled伪类，比如：input:disabled { background: #f5f5f5; cursor: not-allowed; } - IE8 及更老版本不支持
:disabled，得退化用input[disabled] - 屏幕阅读器会跳过
disabled元素，所以别把操作提示（如“此处暂不可用”）只塞进禁用框里；得额外加aria-describedby或旁白文字 - 移动端上，
disabled元素连touchstart都不触发，绑了onclick也没反应
真正需要“视觉禁用 + 保留交互反馈”的场景，aria-disabled="true" 配合自定义样式和 JS 事件拦截，比硬套 disabled 更可控。
