Javascript 如果某个数字已经有值，则禁止用户在输入字段中输入数字

我目前正在做一个费用计算器。以下是我正在研究的部分的规则：

有9个数字输入字段，从A到I 输入字段D、E和F为必填字段。用户必须在这3个输入框中的至少1个输入大于0的数字。我已经注意到了这一点 用户只能输入大于0的数字，最多可输入9个输入中的6个 我已经用这个应用程序实现了这一点，我在页面上有几个复选框，用户必须选择至少1个，最多5个。一旦用户选中其中5个复选框，他们就无法选中第6个复选框。如果他们取消检查5个选项中的一个，他们可以重新检查另一个

因此，我希望通过这些数字输入实现类似的效果

一旦用户在9个输入字段中的多达6个字段中再次输入大于0的数字，他们就无法在其余3个输入字段中的一个字段中输入任何内容。但如果他们要从6个字段中的一个字段中删除输入，他们应该能够在其他4个输入中的一个字段中输入数字，因为现在只有5个字段输入了内容。同样，此数字可以是大于0的任何值。它可以是10、10000或100000，等等。输入的总值并不重要，只是在9个输入中输入多少值，最多6个

我不是在计算本身上寻求帮助，也不是在复选框上寻求帮助。我只是想在上面提到的功能上得到一些帮助

此外，这必须在普通的JavaScript中完成，而不是使用jQuery

如果您能帮我找到这个解决方案，我们将不胜感激！谢谢

以下是HTML：

编辑：在对HTML和JS稍作修改后，我就能够解决这个问题

默认情况下，我为所有9个输入指定了属性data changed=false，而不是根据用户输入动态分配。和@7iiBob的回答类似，我把所有的东西都模糊了，我得到了我需要的效果：

   ENTITY_INPUTS.forEach((input) => {
      const REMAINING_INPUTS = 3;

      // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
      input.addEventListener('blur', () => {
        if (input.value == 0) {
          input.removeAttribute('data-changed', 'true');
          input.setAttribute('data-changed', 'false');
        } else if (input.value !== 0) {
          input.removeAttribute('data-changed', 'false');
          input.setAttribute('data-changed', 'true');
        }

        // upon leaving, check number of elements still with data-changed set to false
        // if the number of elements is equal to 3, set them to disabled
        // else, leave them alone (set disabled to false)
        let unchangedInputs = document.querySelectorAll('[data-changed="false"]');

        if (unchangedInputs.length == REMAINING_INPUTS) {
          unchangedInputs.forEach((input) => {
            input.disabled = true;
          });
        } else {
          unchangedInputs.forEach((input) => {
            input.disabled = false;
          });
        }
      });
    });

这就是逻辑

在复选框上植入：

让inputCheckboxesLength=0；//初始计数器为0 const inputCheckboxes=document.queryselectoral'inputCheck input'；//以复选框为目标 对于var i=0；i<输入复选框。长度；i++{//迭代复选框 InputCheckBox[i]。addEventListener'change'，函数{//侦听changne事件： 如果选中this.checked{//如果选中其中一个复选框： ++inputCheckboxesLength；//增加计数 如果inputCheckboxesLength==6{//如果计数大于5等于6 警报“您不能选中超过5个复选框！”；//警报错误消息 inputCheckboxesLength=5；//将计数改回5 this.checked=false；//删除最后选中的复选框 } } 否则{ -InputCheckBox长度//减少计数-当用户从复选框中删除复选标记时，将触发 } }; } 1. 2. 3. 4. 5. 6. 7. 8.

---

你看起来很快就要解决这个问题了

为什么不把一切都弄得模糊不清呢

---

喂，美树。如上所述，我已经在页面上为复选框提供了功能，因为我最多可以选中5个复选框，但不能选中第6个复选框。正如我所说，我试图实现的功能类似于复选框。我希望用户能够在9个框中的6个框中输入数字，一旦出现这种情况，他们就不能在其余3个字段中输入数字。但是，如果他们应该从6个输入中的一个中删除输入，那么现在在剩下的4个输入中的一个中再次输入一些内容。我会把我的问题再说一遍。但是谢谢你的回答。嘿，妈祖，对不起，这也不是我想要的。输入的总值并不重要。每个输入值都没有限制。可能是10，100，或者10000，没关系。重要的是用户输入了多少个值。不能超过9个中的6个。我再次编辑了我的问题并提到了这一点。我使用value是为了知道是否限制用户在其他输入上输入数据。对不起，这是我现在能带的最好的了。祝你好运。是的，我把一切都弄模糊了！非常感谢。美好的别担心。

// Select all elements with class of entity-input
const ENTITY_INPUTS = document.querySelectorAll('.entity-input');

// Prevent user from entering a number on 7th number input (cannot fill in more than 6)
ENTITY_INPUTS.forEach((input) => {
  const MAX = 6;

  // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
  input.addEventListener('blur', () => {
    if (input.value == 0) {
      input.removeAttribute('data-changed', 'true');
      input.setAttribute('data-changed', 'false');
    } else if (input.value !== 0) {
      input.removeAttribute('data-changed', 'false');
      input.setAttribute('data-changed', 'true');
    }

    let unchangedInputs = document.querySelectorAll('[data-changed="false"]');
    if (unchangedInputs.length !== []) {
      console.log(`The number of inputs with a value still at zero is ${unchangedInputs.length}`);
    }
  });

  // Count the number of inputs with data-changed set to true - can't be more than 6
  input.addEventListener('focus', () => {
    let changedInputs = document.querySelectorAll('[data-changed="true"]');
    console.log(`The number of inputs with a value more than zero is ${changedInputs.length}`);

    if (changedInputs.length == MAX && input.value > 0) {
      console.log(`You may change this element`);
    } else if (changedInputs.length == MAX) {
      console.log(`You can't enter any more numbers!`);
    }
  });
});

   ENTITY_INPUTS.forEach((input) => {
      const REMAINING_INPUTS = 3;

      // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
      input.addEventListener('blur', () => {
        if (input.value == 0) {
          input.removeAttribute('data-changed', 'true');
          input.setAttribute('data-changed', 'false');
        } else if (input.value !== 0) {
          input.removeAttribute('data-changed', 'false');
          input.setAttribute('data-changed', 'true');
        }

        // upon leaving, check number of elements still with data-changed set to false
        // if the number of elements is equal to 3, set them to disabled
        // else, leave them alone (set disabled to false)
        let unchangedInputs = document.querySelectorAll('[data-changed="false"]');

        if (unchangedInputs.length == REMAINING_INPUTS) {
          unchangedInputs.forEach((input) => {
            input.disabled = true;
          });
        } else {
          unchangedInputs.forEach((input) => {
            input.disabled = false;
          });
        }
      });
    });

// Select all elements with class of entity-input
const ENTITY_INPUTS = document.querySelectorAll('.entity-input');

// Prevent user from entering a number on 7th number input (cannot fill in more than 6)
ENTITY_INPUTS.forEach(input => {
  const MAX = 6;

  // Upon leaving the input, assign a data-changed attr with a value of true or false depending on whether the value has changed
  input.addEventListener('blur', () => {
    if (input.value == 0) {
      input.removeAttribute('data-changed', 'true');
      input.setAttribute('data-changed', 'false');
    } else if (input.value !== 0) {
      input.removeAttribute('data-changed', 'false');
      input.setAttribute('data-changed', 'true');
    }

    let changedInputs = document.querySelectorAll('[data-changed="true"]');
    let unchangedInputs = document.querySelectorAll('[data-changed="false"]');

    if (changedInputs.length == MAX) {
      unchangedInputs.forEach(inputToDisable =>
        inputToDisable.setAttribute('disabled', 'true')
      );
    } else if (changedInputs.length < MAX) {
      unchangedInputs.forEach(inputToEnable =>
        inputToEnable.setAttribute('disabled', 'false')
      );
    }
  });
});