使用jquery在html5中动态更改`max`或`min`

Question

我在<input type='number'>更改了max问题。 这是我的示例代码：

 $(document).ready(function(){ var total = 5; $(.foo).attr('max', total); $(.bar).attr('max', total); $(.ext).attr('max', total); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <input type='number' name='foo' class='foo'> <br> <input type='number' name='bar' class='bar'> <br> <input type='number' name='ext' class='ext'> </body>

如何使max必须不>总？

例如：如果我在foo上输入2并在bar上输入1，则ext上的值不得大于2。

谢谢

Answer 1

正如Chris的评论中所提到的，它应该是'.foo'而不是.foo 。 另外作为简写，您可以将它们放在如下所示的单个语句中，如$('.foo, .bar, .ext')如果它们具有相同的max 。

 $(document).ready(function(){ var total = 5; $('.foo, .bar, .ext').attr('max', total); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form action="http://stackoverflow.com"> <input type='number' name='foo' class='foo'> <br> <input type='number' name='bar' class='bar'> <br> <input type='number' name='ext' class='ext'> <br> <input type='submit' value='Submit' > </form> </body>

Answer 2

我假设您要将三个输入的任意组合的总和限制为5.这是一种方法：

 $(document).ready(function(){ var total = 5; var remain; var $foo = $("#foo"); var $bar = $("#bar"); var $ext = $("#ext"); recalculateMax = function(el) { switch (el) { case $foo[0]: remain = total - $bar.val() - $ext.val(); remain = remain < 0 ? 0 : remain $foo.val(($foo.val() <= remain) ? $foo.val() : remain); break; case $bar[0]: remain = total - $foo.val() - $ext.val(); remain = remain < 0 ? 0 : remain $bar.val(($bar.val() <= remain) ? $bar.val() : remain); break; case $ext[0]: remain = total - $foo.val() - $bar.val(); remain = remain < 0 ? 0 : remain $ext.val(($ext.val() <= remain) ? $ext.val() : remain); break; } } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <input id="foo" type='number' name='foo' onChange="recalculateMax(this)"> <br> <input id="bar" type='number' name='bar' onChange="recalculateMax(this)"> <br> <input id="ext" type='number' name='ext' onChange="recalculateMax(this)"> </body>

使用jquery在html5中动态更改`max`或`min`

问题描述

2 个解决方案

解决方案1
0 2016-12-08 02:08:37

解决方案2
0 2016-12-08 02:28:19

使用jquery在html5中动态更改`max`或`min`

问题描述

2 个解决方案

解决方案1 0 2016-12-08 02:08:37

解决方案2 0 2016-12-08 02:28:19

解决方案1
0 2016-12-08 02:08:37

解决方案2
0 2016-12-08 02:28:19