满足条件时禁用Checkbox的实现问题求助

你的代码存在三个关键问题，导致无法实现预期功能：

• 错误比较对象而非输入值：你直接用DOM元素price和200比较，这是拿元素对象和数字比，永远不会得到正确结果。必须获取输入框的value属性，并且转为数字类型（因为input的value默认是字符串）。
• 事件触发时机滞后：change事件只有在输入框失去焦点时才会触发，用户输入过程中不会实时更新checkbox状态，改用input事件可以实现实时响应。
• 重复DOM查询浪费性能：每次触发事件都重新查找checkbox元素，建议提前缓存该元素。

修正后的JavaScript代码 #

document.addEventListener("DOMContentLoaded", function () {
  const priceInput = document.querySelector("[name='purchasePrice']");
  const chargeCheckbox = document.querySelector("[name='chkBx']");
  
  function checkPrice() {
    // 将输入值转为数字，空值或非法输入默认设为0
    const priceValue = Number(priceInput.value) || 0;
    // 直接将布尔判断结果赋值给disabled属性，简化代码
    chargeCheckbox.disabled = priceValue > 200;
  }
  
  // 绑定实时输入事件，用户输入时立即响应
  priceInput.addEventListener("input", checkPrice);
  
  // 页面加载完成后主动执行一次，确保初始状态正确
  checkPrice();
});

补充说明 #

• 你的HTML代码无需修改，可以直接配合修正后的JS使用。
• 新增页面加载时的初始检查，避免输入框有默认值时checkbox状态不匹配的问题。
• 简化了条件判断逻辑，直接把priceValue > 200的布尔结果赋值给disabled，让代码更简洁。

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