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

Question

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

3

我试图限制我的两个输入字段的输入值数量仅为三个。例如：输入1 = 1，输入2 = 2。所以，1 + 2 = 3或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>

- Richard Rosario

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CertainPerformance · Accepted Answer

检查在迭代输入并将其添加到i之后，i > 3是否成立。同时，使用选择器.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>

需要记住的是，如果计算出的计数必须正确，那么在数据被发送到服务器时也应该对其进行验证-在客户端运行的代码是不可信的，因为客户端可以运行（和摆弄）任何他们想要的代码。