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



我在<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,在柱线上输入 1,则 ext 上的 ext 不得大于 2

。谢谢

正如 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>

我假设您想将三个输入的任意组合的总和限制为 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>

最新更新