直接在标签写disabled即可禁用，它为布尔属性，存在即生效；js应操作.disabled布尔值而非setattribute；disabled禁用且不提交值，readonly仅限文本类控件、可聚焦且提交值。
直接在 <input> 标签里写 disabled 就行，它是个布尔属性，存在即生效，不需要赋值，也不认 "true" 或 "false"。
HTML里静态禁用输入框
只需在标签中加入 disabled 即可：
<input type="text" name="username" disabled><input type="email" disabled><input type="checkbox" disabled><input type="radio" disabled>
浏览器会自动灰化显示、阻止聚焦、禁止输入，且该字段的值不会随表单提交——后端收不到。
JS动态控制禁用状态
用 JavaScript 切换时，必须操作 .disabled 属性的布尔值：
- 禁用：
inputEl.disabled = true - 启用：
inputEl.disabled = false - 检查状态：
if (inputEl.disabled) { ... }
别用 setAttribute('disabled', '...') 或 removeAttribute('disabled')，容易出兼容性问题，尤其在旧版 Safari 中再设 disabled = true 可能失效。
常见误区提醒
这些写法看似合理，但都不可靠：
-
<input disabled>—— 依然禁用，因为只要属性存在就生效 -
<input disabled>—— 合法但不推荐，语义不如disabled清晰 -
<div disabled><input></div>——div不支持disabled，无效 - 给
label加disabled—— 不影响关联的input，必须直接作用于input本身
disabled 和 readonly 的关键区别
选错就丢数据或交互异常：
-
disabled：不能聚焦、不能输入、不提交值、对所有表单控件（包括
select、checkbox）都有效 -
readonly：仅适用于
text、password、textarea；可聚焦、可复制、值照常提交；对下拉框、复选框完全无效
比如登录页想“显示用户名但不让改”，又需后端收到该值，就得用 readonly，不是 disabled。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
