如何在输入字段中将数字限制为总共3个？

Question

我试图将两个输入字段的输入值的数量限制为三个。例如input 1 = 1, input 2 = 2. so, 1+ 2 = 3 or 2 + 1= 3，如果一个输入中的值达到3，则用户将不能添加更多。还有其他类似的问题，但它们通常仅适用于1个输入字段。我想要对合并字段的限制。

我尝试了以下代码，但它似乎并没有按照我想要的方式进行响应。它的总值并不只有3。它在浏览器中完成，但是当我查看控制台时，它仍然继续。

$('.qty_pack').change(function() {
  var i = 0;
  if (i >= 3) {
    $(this).parent().find('.qty_pack').val(0);
    console.log('You have reached max items');
  }
  $('.check_sales_pack').each(function() {
    i += parseFloat($(this).parent().find('.qty_pack').val())
  });
  console.log(i);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="hidden" class="check_sales_pack" name="check_sales_pack">
  <input type="number" class="qty_pack" name="qty_pack" value="0" min="0" max="3">
  <input type="number" class="qty_pack" name="qty_pack" value="0" min="0" max="3">
</div>

Answer 1

遍历输入并添加到i > 3 后，检查是否i。另外，使用选择器.qty_pack选择输入：

$('.qty_pack').change(function(e) {
  let count = 0;
  $('.qty_pack').each(function() {
    count += parseFloat(this.value);
  });
  console.log('Total:', count);
  if (count > 3) {
    // Reset the *most recently changed* input to 0:
    e.target.value = 0;
    console.log('You have reached max items');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="hidden" class="check_sales_pack" name="check_sales_pack">
  <input type="number" class="qty_pack" name="qty_pack" value="0" min="0" max="3">
  <input type="number" class="qty_pack" name="qty_pack" value="0" min="0" max="3">
</div>

请记住，如果计算次数已是正确的，验证应在服务器上完成，以及，当数据被发送到它-代码运行在客户端不能信任，因为客户端可以运行（与猴补丁）他们想要的任何代码。