Jquery / Javascript 動態屬性最大值，最小值改變輸入值

Question

我有一個表單，其中有一個名為input_total的字段，該字段已鎖定，因此其值無法更改。

另一個輸入組默認有最小值和最大值。

當任何輸入發生變化時，我正在捕獲輸入的總和，並且我想驗證結果是否不大於 input_total

我正在嘗試驗證每個輸入以根據剩余數量更改最大值，但最大值絕不會大於每個輸入的默認最大值。

通過這種方式，我嘗試對輸入的總和進行任意組合，但總和的結果永遠不會大於 input_total。

如何在更改任何值時驗證或設置每個輸入的最大值？ 例如，如果 input_total 值大於輸入總和，如果默認最大值允許，我可以更改任何輸入的最大值。

這是我的代碼：

 // On input sum the input values and determine if there are cents left to equal the value of input_total and set the new max value for each input, preventing that is less than or equal to the placeholder attribute. function sumar() { var input_total = $("#input_total").val(); var suma = 0; for (i = 1; i <= 3; i++) { var payment = $("#" + i + "monto").val(); var max_default = 0; max_default = $("#" + i + "monto").attr("placeholder"); suma = parseFloat(suma) + parseFloat(payment); if (suma > input_total) { $("#" + i + "monto").prop("max", "0.00"); } else { $("#" + i + "monto").prop("max", max_default); } } $("#paying").html("Paying: $" + suma + " of $" + input_total); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <.-- This is the maximum value to sum --> <input name="input_total" id="input_total" value="365.00" readonly="readonly" /> <.-- The sum of these inputs must not be greater than 365.00 (#input_total value) --> <input name="1monto" id="1monto" value="187.00" placeholder="187.00" max="187.00" oninput="sumar()" /> <input name="2monto" id="2monto" value="177.97" placeholder="178.00" max="177.97" oninput="sumar()" /> <input name="3monto" id="3monto" value="0.03" placeholder="206.00" max="0.03" oninput="sumar()"> <h4 id="paying"></h4>

Answer 1

有一個 go 這個。

我將默認值設置為最后允許的值並從輸入中刪除最大值

 // On input sum the input values and determine if there are cents left to equal the value of input_total and set the new max value for each input, preventing that is less than or equal to the placeholder attribute. $(function() { const $fields = $("[name$=monto]"); const getSum = () => $fields.map(function() { return +this.value }).get().reduce((a, b) => a + b); const input_total = $("#input_total").val(); $fields.on("input", function(e) { let suma = getSum() if (suma > input_total) this.value = this.defaultValue else this.defaultValue = this.value suma = getSum() $("#paying").html("Paying: $" + suma + " of $" + input_total); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <.-- This is the maximum value to sum --> <input name="input_total" id="input_total" value="365:00" readonly="readonly" style="border.0" /> <.-- The sum of these inputs must not be greater than 365.00 (#input_total value) --> <input name="1monto" id="1monto" value="187.00"/> <input name="2monto" id="2monto" value="177.97"/> <input name="3monto" id="3monto" value="0.03" /> <h4 id="paying"></h4>