使用jquery和重置数量，根据4个输入的总和设置数字输入最大值

Question

我遵循这个线程使用jquery基于4个输入的总和设置数字输入最大值，下面的代码按预期工作：

$("input[type='number'].wapo-product-qty").val(0); 
$("input[type='number'].wapo-product-qty").change(function () {
$.each($("input[type='number'].wapo-product-qty"), function (index, element) {
var total = 0;
$.each($("input[type='number'].wapo-product-qty").not($(element)), function 
(innerIndex, innerElement) {
total += parseInt($(innerElement).val());
});
if ($(element).val() > 6 - total) {
alert("The total value for all inputs can not exceed 6");
$(element).val(0);
return false;
} else {
$(element).attr("max", 6 - total);
}
});
});

此处为完整HTML-->https://pastebin.com/DjX8Kkt1

但我需要数量选择器从0开始，而不是从1开始。

我添加了这个，但我不知道是最好的方法：

$("input[type='number'].wapo-product-qty").val(0); 

一旦达到最大数量的条件，未使用选择器选择数量的字段将重置为0。

例如，在我的案例中：

4 input fields: 
0 -> change to 2
0 -> change to 2
0 -> change to 2
0 -> change to 1 -> we are over 6, condition reached

但是最后一个输入仍然是1，所以出于这个原因我想重置为0。

感谢

Answer 1

使用更新的javascript函数尝试此代码。

调用函数onchange of input，得到所有输入和检查条件的总和

$("input[type='number'].wapo-product-qty").val(0);
function getQtyTotal(event) {
var total = 0;
// total += parseInt(event.target.value);
$.each($("input[type='number'].wapo-product-qty"), function(index, element) {
total += parseInt($(this).val());
});
//console.log(total);
if (total > 6) {
alert("The total value for all inputs can not exceed 6");
event.target.value = 0;
return false;
} else {
if (event.target.value > 6) {
event.target.setAttribute("max", 6 - total);
}
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options default-closed per-row-5 grid">
<p class="wapo-addon-description">Choose product</p>
<div id="yith-wapo-option-1-0" class="yith-wapo-option selection-multiple       " data-replace-image="">
<input type="checkbox" id="yith-wapo-1-0" class="yith-proteo-standard-checkbox" name="yith_wapo[][1-0]" value="product-8061-1" data-price="0" data-price-sale="0" data-price-type="fixed" data-price-method="free" data-first-free-enabled="no" data-first-free-options="5"
data-addon-id="1" style="display: none;">
<label for="yith-wapo-1-0" style="width: 33%;">
<img src="#" data-id="8061">
<div>
<!-- PRODUCT NAME -->
Product 1       
<br>
<div class="option-add-to-cart">
<input type="number" class="wapo-product-qty" data-product-id="8061" name="yith_wapo_product_qty[1-0]" value="1" min="1" max="1254" style="min-width: 50px; width: 5em; margin-right: 10px; float: left;" onChange="getQtyTotal(event);">
</div>
</div>
<div class="clear"></div>
</label>
</div>
<div id="yith-wapo-option-1-1" class="yith-wapo-option selection-multiple       " data-replace-image="">
<input type="checkbox" id="yith-wapo-1-1" class="yith-proteo-standard-checkbox" name="yith_wapo[][1-1]" value="product-8028-1" data-price="0" data-price-sale="0" data-price-type="fixed" data-price-method="free" data-first-free-enabled="no" data-first-free-options="5"
data-addon-id="1" style="display: none;">
<label for="yith-wapo-1-1" style="width: 33%;">
<img src="#" data-id="8028">
<div>
<!-- PRODUCT NAME -->
Product 2               
<br>
<div class="option-add-to-cart">
<input type="number" class="wapo-product-qty" data-product-id="8028" name="yith_wapo_product_qty[1-1]" value="1" min="1" max="1180" style="min-width: 50px; width: 5em; margin-right: 10px; float: left;" onChange="getQtyTotal(event);">
</div>
</div>
<div class="clear"></div>
</label>
</div>
<div id="yith-wapo-option-1-2" class="yith-wapo-option selection-multiple       " data-replace-image="">
<input type="checkbox" id="yith-wapo-1-2" class="yith-proteo-standard-checkbox" name="yith_wapo[][1-2]" value="product-8026-1" data-price="0" data-price-sale="0" data-price-type="fixed" data-price-method="free" data-first-free-enabled="no" data-first-free-options="5"
data-addon-id="1" style="display: none;">
<label for="yith-wapo-1-2" style="width: 33%;">
<img src="#" data-id="8026">
<div>
<!-- PRODUCT NAME -->
Product 3       
<br>
<div class="option-add-to-cart">
<input type="number" class="wapo-product-qty" data-product-id="8026" name="yith_wapo_product_qty[1-2]" value="1" min="1" max="991" style="min-width: 50px; width: 5em; margin-right: 10px; float: left;" onChange="getQtyTotal(event);">
</div>
</div>
<div class="clear"></div>
</label>
</div>
<div id="yith-wapo-option-1-3" class="yith-wapo-option selection-multiple       " data-replace-image="">
<input type="checkbox" id="yith-wapo-1-3" class="yith-proteo-standard-checkbox" name="yith_wapo[][1-3]" value="product-7943-1" data-price="0" data-price-sale="0" data-price-type="fixed" data-price-method="free" data-first-free-enabled="no" data-first-free-options="5"
data-addon-id="1" style="display: none;">
<label for="yith-wapo-1-3" style="width: 33%;">
<img src="#" data-id="7943">
<div>
<!-- PRODUCT NAME -->
Product 4
<br>
<div class="option-add-to-cart">
<input type="number" class="wapo-product-qty" data-product-id="7943" name="yith_wapo_product_qty[1-3]" value="1" min="1" max="955" style="min-width: 50px; width: 5em; margin-right: 10px; float: left;" onChange="getQtyTotal(event);">
</div>
</div>
<div class="clear"></div>
</label>
</div>