jqueryでhtml5で `max`または` min`を動的に変更

maxの<input type='number'>に問題があります。これはサンプルのための私のコードです：jqueryでhtml5で `max`または` min`を動的に変更

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>

？

例：fooに2を入力し、barに1を入力すると、extには2を超えてはいけません。クリスによってコメントで述べたように

おかげで

出典

2016-12-08 wawan Setiyawan

は、 '$（.foo）'があれば、 '$（"。foo "）'が必要です。また、クラスではなく、固有の要素にIDを使用する必要があります。 –

、それは'.foo'の代わり.fooでなければなりません。また、省略形として、$('.foo, .bar, .ext')のように1つの文でそれらを持つことができます。すべて同じである場合は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>

出典

2016-12-08 02:08:37 Aruna

私はここでそれを行うための一つの方法ですあなたが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>

出典

2016-12-08 02:28:19

そして、数値が負数にならないようにするには、各入力に 'min =" 0 "'という属性を追加するだけです –

jqueryでhtml5で `max`または` min`を動的に変更

答えて

関連する問題