Jquery 加/减最大值输入

我有一个加号/减号按钮，希望它能让用户不能选择超过20个，但不知道如何让它工作。我尝试使用min=1 max=5属性，但它们不起作用。这是我的代码和小提琴的链接

---

我在这里更新了JSFIDLE：

基本上只是添加了一个块，检查当前值是否低于20，以允许增量，否则显示不允许的图标：

if (currentVal < 20)
{
      $('input[name='+fieldName+']').val(currentVal + 1);
      $('.qtyminus').val("-").removeAttr('style');
}
else
{
      $('.qtyplus').val("+").css('color','#aaa');
      $('.qtyplus').val("+").css('cursor','not-allowed');
}

---

我在这里更新了JSFIDLE：

基本上只是添加了一个块，检查当前值是否低于20，以允许增量，否则显示不允许的图标：

if (currentVal < 20)
{
      $('input[name='+fieldName+']').val(currentVal + 1);
      $('.qtyminus').val("-").removeAttr('style');
}
else
{
      $('.qtyplus').val("+").css('color','#aaa');
      $('.qtyplus').val("+").css('cursor','not-allowed');
}

---

你做得对

$('.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) && currentVal < 20) {
                // Increment
                $('input[name='+fieldName+']').val(currentVal + 1);
            } else {
                // Otherwise put a 0 there
                //$('input[name='+fieldName+']').val(1);
                $(this).val("+").css('color','#aaa');
            $(this).val("+").css('cursor','not-allowed');

            }
        });

jQuerydocument.readyfunction{ //此按钮将增加值 $'.qtyplus'。单击函数{ //别像个按钮似的 e、 防止违约； //获取字段名 fieldName=$this.attr'field'； //获取其当前值 var currentVal=parseInt$'input[name='+fieldName+']'.val； //如果不是未定义的 如果！isNaNcurrentVal&¤tVal<20{ //增量 $'input[name='+fieldName+']'.valcurrentVal+1； }否则{ //否则，在那里放一个0 //$'input[name='+fieldName+']'.val1； $this.val+.css'color'，'aaa'； $this.val+.css'cursor'，'not-allowed'； } }; //此按钮将使该值递减至0 $.qtyminus.clickFunction{ //别像个按钮似的 e、 防止违约； //获取字段名 fieldName=$this.attr'field'； //获取其当前值 var currentVal=parseInt$'input[name='+fieldName+']'.val； //如果它不是未定义的或大于0 如果！isNaNcurrentVal&¤tVal>1{ //减量一 $'input[name='+fieldName+']'.valcurrentVal-1； }否则{ //否则，在那里放一个0 $'input[name='+fieldName+']'.val1； $this.val-.css'color'，'aaa'； $this.val-.css'cursor'，'not-allowed'； } }; };

---

你做得对

$('.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) && currentVal < 20) {
                // Increment
                $('input[name='+fieldName+']').val(currentVal + 1);
            } else {
                // Otherwise put a 0 there
                //$('input[name='+fieldName+']').val(1);
                $(this).val("+").css('color','#aaa');
            $(this).val("+").css('cursor','not-allowed');

            }
        });

jQuerydocument.readyfunction{ //此按钮将增加值 $'.qtyplus'。单击函数{ //别像个按钮似的 e、 防止违约； //获取字段名 fieldName=$this.attr'field'； //获取其当前值 var currentVal=parseInt$'input[name='+fieldName+']'.val； //如果不是未定义的 如果！isNaNcurrentVal&¤tVal<20{ //增量 $'input[name='+fieldName+']'.valcurrentVal+1； }否则{ //否则，在那里放一个0 //$'input[name='+fieldName+']'.val1； $this.val+.css'color'，'aaa'； $this.val+.css'cursor'，'not-allowed'； } }; //此按钮将使该值递减至0 $.qtyminus.clickFunction{ //别像个按钮似的 e、 防止违约； //获取字段名 fieldName=$this.attr'field'； //获取其当前值 var currentVal=parseInt$'input[name='+fieldName+']'.val； //如果它不是未定义的或大于0 如果！isNaNcurrentVal&¤tVal>1{ //减量一 $'input[name='+fieldName+']'.valcurrentVal-1； }否则{ //否则，在那里放一个0 $'input[name='+fieldName+']'.val1； $this.val-.css'color'，'aaa'； $this.val-.css'cursor'，'not-allowed'； } }; };

---

尝试添加条件以检查小于最大值的值

$('.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
                    if(currentVal<20)
                    {
                    $('input[name='+fieldName+']').val(currentVal + 1);
                    $('.qtyminus').val("-").removeAttr('style');
                    }
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(1);

                }
            });

---

尝试添加条件以检查小于最大值的值

$('.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
                    if(currentVal<20)
                    {
                    $('input[name='+fieldName+']').val(currentVal + 1);
                    $('.qtyminus').val("-").removeAttr('style');
                    }
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(1);

                }
            });

然后，您可以使用脚本传递验证消息，因为浏览器中内置的数字字段的消息当前很差

这将删除对库的依赖，遵循HTML规范，并免费内置可访问性

如果你还需要+/− 按钮要满足设计限制，请确保使用减号&8722；然后在正确的字段类型上使用脚本逐步增强。这样，任何jQuery没有下载的场景，如网络故障或页面上出现脚本错误，都不会导致整个崩溃

如果您无法通过以下方式满足设计要求：+/− 按钮，考虑完全失去它们。< /P> 您还可以逐步增强这一点，使之适用于可能会遇到type=number问题的浏览器，尽管您可以看到，通过在元素中添加模式匹配，而不使用脚本会更好，尽管这是一个非常边缘的情况：

你可以阅读或阅读

然后，您可以使用脚本来传递验证消息，因为 浏览器中数字字段的内置年龄目前很低

这将删除对库的依赖，遵循HTML规范，并免费内置可访问性

如果你还需要+/− 按钮要满足设计限制，请确保使用减号&8722；然后在正确的字段类型上使用脚本逐步增强。这样，任何jQuery没有下载的场景，如网络故障或页面上出现脚本错误，都不会导致整个崩溃

如果您无法通过以下方式满足设计要求：+/− 按钮，考虑完全失去它们。< /P> 您还可以逐步增强这一点，使之适用于可能会遇到type=number问题的浏览器，尽管您可以看到，通过在元素中添加模式匹配，而不使用脚本会更好，尽管这是一个非常边缘的情况：

您可以阅读或。

是否尝试在第一个if之后和在else之间添加else ifcurrentVal==20{$'input[name='+filedName+']'。valcurrentVal；第一个if需要添加一个&¤tVal！=20。您是否可以检查currentVal是否为20，然后从+按钮事件返回？是否尝试添加else ifcurrentVal==20{$'input[name='+filedName+']'。valcurrentVal；在第一个if之后以及在else之间？第一个if将需要添加一个&¤tVal！=20。您不能只检查currentVal是否为20，然后从+按钮事件返回吗？