如何使用jQuery根据值禁用所有class为InsideInvoice的number类型输入框

嘿，我猜你大概率是踩了「input值是字符串类型」的坑！之前的方法没生效，十有八九是直接拿字符串和数字0比较导致的，我给你几个靠谱的实现方案，分原生JS和jQuery两种，你按需选：

原生JavaScript 实现 #

1. 页面加载时初始化处理现有输入框 #

先确保DOM加载完成后执行代码，避免找不到元素：

// 等DOM加载完毕再执行
document.addEventListener('DOMContentLoaded', function() {
  // 精准定位目标input：class为InsideInvoice且type是number
  const targetInputs = document.querySelectorAll('input.InsideInvoice[type="number"]');
  
  targetInputs.forEach(input => {
    // 必须把value转成数字再判断！input的value默认是字符串
    if (Number(input.value) === 0) {
      input.disabled = true;
    }
  });
});

2. 实时监听输入变化，动态禁用/启用 #

如果需要用户输入时自动判断状态，加个input事件监听：

document.addEventListener('DOMContentLoaded', function() {
  const targetInputs = document.querySelectorAll('input.InsideInvoice[type="number"]');
  
  targetInputs.forEach(input => {
    // 初始化先检查一次
    input.disabled = Number(input.value) === 0;
    
    // 监听输入变化
    input.addEventListener('input', function() {
      this.disabled = Number(this.value) === 0;
    });
  });
});

3. 处理动态添加的输入框 #

如果你的输入框是通过JS动态新增的（比如点击按钮添加），用事件委托更稳妥：

document.addEventListener('DOMContentLoaded', function() {
  // 给父元素（或document）绑定事件，监听动态元素的输入
  document.addEventListener('input', function(e) {
    const target = e.target;
    // 判断是否是目标input
    if (target.classList.contains('InsideInvoice') && target.type === 'number') {
      target.disabled = Number(target.value) === 0;
    }
  });
  
  // 初始化现有元素
  const targetInputs = document.querySelectorAll('input.InsideInvoice[type="number"]');
  targetInputs.forEach(input => {
    input.disabled = Number(input.value) === 0;
  });
});

jQuery 实现（如果你在用jQuery） #

初始化+实时监听 #

$(document).ready(function() {
  // 初始化处理现有元素
  $('input.InsideInvoice[type="number"]').each(function() {
    $(this).prop('disabled', Number($(this).val()) === 0);
  });
  
  // 实时监听输入变化
  $('input.InsideInvoice[type="number"]').on('input', function() {
    $(this).prop('disabled', Number($(this).val()) === 0);
  });
});

处理动态添加的元素 #

$(document).ready(function() {
  // 事件委托处理动态元素
  $(document).on('input', 'input.InsideInvoice[type="number"]', function() {
    $(this).prop('disabled', Number($(this).val()) === 0);
  });
  
  // 初始化现有元素
  $('input.InsideInvoice[type="number"]').each(function() {
    $(this).prop('disabled', Number($(this).val()) === 0);
  });
});

关键注意点 #

• 一定要转换value类型：input的value属性默认是字符串，直接写input.value === 0会返回false，必须用Number()或者parseFloat()转成数字再比较！
• 确保DOM加载完成：代码要放在DOMContentLoaded（原生）或$(document).ready()（jQuery）回调里，不然可能找不到页面上的元素。

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