如何根据输入框内容动态启用禁用HTML按钮？

本文共计770个文字，预计阅读时间需要4分钟。

原文：

在 Web 表单交互中，常需实现“仅当输入有效时才允许提交”的体验，例如：用户名输入框非空时才启用「保存分数」按钮。但开发者常因逻辑判断方向错误导致功能失效——如本例中，button.disabled = true 被错误地置于 input.value !== '' 分支下，结果是输入后按钮反而被禁用，与预期完全相反。

✅ 正确逻辑：输入非空 → 启用按钮；输入为空 → 禁用按钮

核心原则是：disabled 属性为布尔值，设为 false 表示启用，true 表示禁用。