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>