Question

我使用简单的减号/加jsfiddle来添加或删除输入字段中的数字。但是，我试图找出设置最大值的最佳方法，这意味着如果用户试图键入大于10的数字或使用加号功能，他们无法通过10.什么是实现该目标的最佳方法？

jQuery(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        $('input[name='+fieldName+']').val(currentVal + 1);
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(0);
    }
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[name='+fieldName+']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(0);
    }
});

}）;

jsfiddle

Answer 1

您无需plus和minus按钮即可实现此目的。具有input和number属性的min类型max会为您执行此操作。

＆＃13;

<input type='Number' name='quantity' value='0' class='qty' max="10" min="0" />

＆＃13;

如果您仍想使用按钮，请参阅this fiddle并阻止用户超越 10

Answer 2

如果您只对JS / jQuery解决方案感兴趣，只需更改第11行：

 if (!isNaN(currentVal) && currentVal < 10) {
                       ^~~~~~~~~~~~~~~~~~~^---------[Add this to line 11

http://jsfiddle.net/zer00ne/snwxaLx7/

要将值保持为10而不是重置为0，请更改第16行：

      $('input[name=' + fieldName + ']').val(10);
                                             ^^-----[Change 0 into 10

http://jsfiddle.net/zer00ne/v1pje44v/

使用jQuery为输入字段添加最大值

2 个答案: