Set number input max based on the sum of 4 inputs using jquery and reset quantity-CodePudding

I followed this thread Set number input max based on the sum of 4 inputs using jquery and the code below works as expected:

$("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);
        }
    });
});

Here full HTML --> https://pastebin.com/DjX8Kkt1

But I need the quantity selector to start from 0 and not from 1.

I added this for that, but I don't know is the best approach:

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

Once the condition of the maximum number of quantities is reached, the fields for which the quantity has not been selected with the selector are reset to 0.

For example in my case:

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

But the last input it remains 1, so I would like to reset to 0 for this reason.

Thanks

CodePudding user response：

try this code with an updated javascript function.

call function onchange of input and get sum of all input and check condition

$("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 >
  <p >Choose product</p>
  <div id="yith-wapo-option-1-0"  data-replace-image="">
    <input type="checkbox" id="yith-wapo-1-0"  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 >
                <input type="number"  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 ></div>
    </label>
  </div>
  <div id="yith-wapo-option-1-1"  data-replace-image="">
    <input type="checkbox" id="yith-wapo-1-1"  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 >
                <input type="number"  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 ></div>
    </label>
  </div>
  <div id="yith-wapo-option-1-2"  data-replace-image="">
    <input type="checkbox" id="yith-wapo-1-2"  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 >
                <input type="number"  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 ></div>
    </label>
  </div>
  <div id="yith-wapo-option-1-3"  data-replace-image="">
    <input type="checkbox" id="yith-wapo-1-3"  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 >
                <input type="number"  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 ></div>
    </label>
  </div>