如何实现多个number输入框总和达12时自动禁用剩余输入框

实现方案 #

以下是原生JavaScript实现代码，可直接替换你现有的逻辑：

const totalMaxQty = 12;
// 获取所有口味对应的数字输入框
const getAllInputs = document.querySelectorAll('.wapf-field-input input[type=number]');

// 初始化：绑定输入事件、设置单输入框上下限
getAllInputs.forEach(input => {
  input.max = totalMaxQty;
  input.min = 0; // 限制最小输入值为0，避免负数
  input.addEventListener('input', handleInputChange);
});

// 输入事件处理函数
function handleInputChange(e) {
  // 校验当前输入值合法性，非数字、负数直接置为0
  const currentVal = parseInt(e.target.value);
  if (isNaN(currentVal) || currentVal < 0) {
    e.target.value = 0;
  }
  // 计算当前总选择数量
  const currentTotal = calcTotal();
  
  // 超过总上限时自动修正当前输入值，保证总数量不超12
  if (currentTotal > totalMaxQty) {
    const overNum = currentTotal - totalMaxQty;
    e.target.value = Math.max(0, parseInt(e.target.value) - overNum);
  }
  
  // 切换输入框禁用状态
  toggleInputsDisable();
}

// 计算所有输入框的总选择数量
function calcTotal() {
  let total = 0;
  getAllInputs.forEach(input => {
    const val = parseInt(input.value);
    total += isNaN(val) ? 0 : val;
  });
  return total;
}

// 控制输入框禁用逻辑
function toggleInputsDisable() {
  const currentTotal = calcTotal();
  getAllInputs.forEach(input => {
    const val = parseInt(input.value) || 0;
    // 总数量达到上限时，仅禁用还未选择的空输入框，已填值的输入框仍可调整
    if (currentTotal >= totalMaxQty) {
      input.disabled = val === 0;
    } else {
      // 总数量未达上限时所有输入框恢复可用
      input.disabled = false;
    }
  });
}

核心逻辑说明 #

• 自动处理非法输入：拦截负数、非数字内容，默认转为0
• 超量自动修正：用户输入导致总数量超过12时，会自动回退当前输入框的数值，保证总数量始终符合盒装规则
• 灵活禁用逻辑：总数量达到12时，仅禁用未选择的口味输入框，已选择的口味仍可调整数量；调整后总数量低于12时，会自动恢复所有输入框的可用状态

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