如何用JavaScript控制按钮disabled属性？输入值清空后按钮未禁用问题

问题根源 #

你的代码逻辑存在漏洞：number类型的输入框被清空后，inputDOM.value是空字符串，而JS中空字符串和数字比较时会被强制转换为0，导致"" >= 0的结果为true，所以清空输入框时依然会执行移除按钮disabled属性的逻辑，不会触发禁用操作。

修正方案 #

方案一：调整判断顺序+增加有效性校验

let inputDOM = document.querySelector('.input');
let BtnDOM = document.querySelector('.btn');

inputDOM.addEventListener('input', function() {
  // 优先判断输入是否为空
  if (inputDOM.value.trim() === "") {
    BtnDOM.setAttribute("disabled", "");
  } else if (!isNaN(inputDOM.value) && Number(inputDOM.value) >= 0) {
    // 确保输入是有效的非负数字
    BtnDOM.removeAttribute("disabled");
  } else {
    // 无效输入（如非数字字符）时也禁用按钮
    BtnDOM.setAttribute("disabled", "");
  }
});

方案二：直接操作disabled布尔属性（更简洁）

let inputDOM = document.querySelector('.input');
let BtnDOM = document.querySelector('.btn');

inputDOM.addEventListener('input', function() {
  // 只有输入非空且是有效非负数字时，按钮才可用
  const isValid = inputDOM.value.trim() !== "" && !isNaN(inputDOM.value) && Number(inputDOM.value) >= 0;
  // 直接给disabled赋值布尔值，比操作属性更直观可靠
  BtnDOM.disabled = !isValid;
});

补充说明 #

• 增加trim()是为了处理输入全是空格的情况
• isNaN()判断可以过滤number输入框中可能出现的无效内容（比如字母e，它属于number输入框允许的字符但不是有效数字）
• 直接操作disabled属性比使用setAttribute/removeAttribute更符合DOM属性的操作规范，逻辑也更清晰

内容的提问来源于stack exchange，提问作者AWEI