最可靠的方式是用 element.disabled = true/false 控制禁用状态,避免使用 setattribute/removeattribute;disabled 是布尔属性,只看是否存在,不解析值;disabled 元素不参与表单提交,需传值时应改用 readonly;禁用后元素无触控响应且屏幕阅读器跳过,关键提示勿放其中。

直接用 element.disabled = true/false 控制最可靠
别碰 setAttribute('disabled', '...') 或 removeAttribute('disabled'),这些在旧版 Safari 里容易导致状态错乱。现代浏览器统一支持布尔属性赋值:inputEl.disabled = true 立即禁用,inputEl.disabled = false 立即启用。检查状态也只需 if (inputEl.disabled) —— 这和 HTML 里写 disabled 的行为完全一致。
为什么 disabled="false" 不起作用
disabled 是布尔属性,只看“是否存在”,不看值。写成 disabled="false"、disabled="0" 甚至 disabled="",浏览器都当它已启用(即禁用)。HTML 解析时只要这个属性名存在,就生效。所以动态控制时,绝不能靠字符串赋值,必须用布尔值。
切换后表单提交行为差异必须清楚
被设为 disabled 的 input 在 FormData 序列化或原生表单提交时完全消失,后端收不到该字段。如果只是“不让改但要传值”,比如预填的用户名、订单编号,该用 readonly 而非 disabled。两者同时存在时,disabled 优先级更高,readonly 直接被忽略。
移动端和可访问性容易被忽略的细节
禁用后元素无法触发 touchstart 或 click,哪怕绑了事件监听也没用;屏幕阅读器会跳过它,所以别把关键提示文字塞进 disabled 的 input 里。如果需要“视觉禁用但保留语义”,考虑用 aria-disabled="true" 配合 CSS 控制,而不是硬上 disabled。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











