Javascript 如果达到“数字输入最大值/减号”属性，则禁用加号/减号按钮

我在做一个商业项目。对于那些不熟悉WooCommerce的人来说，它通过动态添加相应的+/-按钮来控制您添加到购物车中的产品的数量。我试图做的是在数字输入达到其

max

或

min

属性时禁用+/-按钮。如果未设置

max

或

min

属性，则min应默认为0，max应默认为999。在页面加载时，如果数字输入

值

开始于

最小值

或

最大值

（或者如果未设置

最小值

或

最大值

则返回），则应立即禁用相应的按钮，而无需等待触发数字输入上的

.change（）

HTML（添加了预按钮）

HTML（添加了发布按钮）

$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />');

$("input.qty:not(.product-quantity input.qty)").each(function () {
    var min = parseFloat($(this).attr('min'));

    if (min && min > 0 && parseFloat($(this).val()) < min) {
        $(this).val(min);
    }
});

$(document).on('click', '.plus, .minus', function () {

    var $qty = $(this).closest('.quantity').find(".qty");
    var currentVal = parseFloat($qty.val());
    var max = parseFloat($qty.attr('max'));
    var min = parseFloat($qty.attr('min'));
    var step = $qty.attr('step');

    if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 0;
    if (max == "" || max == "NaN") max = '';
    if (min == "" || min == "NaN") min = 0;
    if (step == 'any' || step == "" || step == undefined || parseFloat(step) == "NaN") step = 1;

    if ($(this).is('.plus')) {
        if (max && (max == currentVal || currentVal > max)) {
            $qty.val(max);
        } else {
            $qty.val(currentVal + parseFloat(step));
        }
    } else {
        if (min && (min == currentVal || currentVal < min)) {
            $qty.val(min);
        } else if (currentVal > 0) {
            $qty.val(currentVal - parseFloat(step));
        }
    }

    $qty.trigger('change');
});

$（“div.quantity:not（.buttons\u added）、td.quantity:not（.buttons\u added）”）.addClass（'buttons\u added'）.append（“”）.prepend（“”）；
$（“输入数量：非（.product quantity输入数量）”）。每个（函数（）{
var min=parseFloat（$（this.attr（'min'））；
if（min&&min>0&&parseFloat（$（this）.val（））max））{
$qty.val（最大值）；
}否则{
$qty.val（当前值+分析浮动（步））；
}
}否则{
if（min&（min==currentVal | | currentVal0），则为else{
$qty.val（当前值-解析浮动（步））；
}
}
$qty.trigger（'change'）；
});

我的JS

$.fn.disableNumberButtons = function () {
    var value = this.val();

    var minus = this.prev();
    var minAttr = this.attr('min'); 
    var min = (minAttr) ? minAttr : 0;
    (value > min) ? minus.removeClass('is-disabled') : minus.addClass('is-disabled');

    var plus = this.next();
    var maxAttr = this.attr('max');
    var max = (maxAttr) ? maxAttr : 999;
    (value < max) ? plus.removeClass('is-disabled') : plus.addClass('is-disabled');
}

$('input.qty').each(function () {
    $(this).disableNumberButtons();
});

$('input.qty').change(function () {
    $(this).disableNumberButtons();
});

$.fn.disableNumberButtons=函数（）{
var value=this.val（）；
var减号=this.prev（）；
var minAttr=this.attr（'min'）；
var min=（minAttr）？minAttr:0；
（值>最小值）？减.removeClass（'is-disabled'）：减.addClass（'is-disabled'）；
var plus=this.next（）；
var maxAttr=this.attr（'max'）；
var max=（maxAttr）？maxAttr:999；
（值<最大值）？plus.removeClass（'is-disabled'）：plus.addClass（'is-disabled'）；
}
$（'input.qty'）。每个（函数（）{
$（此）.disableNumberButtons（）；
});
$（'input.qty'）.change（函数（）{
$（此）.disableNumberButtons（）；
});

问题

如果我将

input[type=“number”]

的值增加到3到10之间，则会禁用加号按钮。一旦我得到大于10的值，它就会重新启用它，直到值达到20，即

max

属性的值，在该属性中它应该被禁用。有什么好处

---

现场演示：

您的js文件中有许多错误，我已经为您更正了这些错误，现在请检查是否成功。我到底做错了什么？它不是在

parseFloat

中包装

value

吗？事实上我不记得我喝醉了：），但这不是因为在parseFloat中包装值，例如，你在通过parseFloat再次设置值如果min-max，我将其更正为min--，max++这更好，而且许多行都已更正，不要问我它们是什么，试着比较^_^

$("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass('buttons_added').append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />');

$("input.qty:not(.product-quantity input.qty)").each(function () {
    var min = parseFloat($(this).attr('min'));

    if (min && min > 0 && parseFloat($(this).val()) < min) {
        $(this).val(min);
    }
});

$(document).on('click', '.plus, .minus', function () {

    var $qty = $(this).closest('.quantity').find(".qty");
    var currentVal = parseFloat($qty.val());
    var max = parseFloat($qty.attr('max'));
    var min = parseFloat($qty.attr('min'));
    var step = $qty.attr('step');

    if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 0;
    if (max == "" || max == "NaN") max = '';
    if (min == "" || min == "NaN") min = 0;
    if (step == 'any' || step == "" || step == undefined || parseFloat(step) == "NaN") step = 1;

    if ($(this).is('.plus')) {
        if (max && (max == currentVal || currentVal > max)) {
            $qty.val(max);
        } else {
            $qty.val(currentVal + parseFloat(step));
        }
    } else {
        if (min && (min == currentVal || currentVal < min)) {
            $qty.val(min);
        } else if (currentVal > 0) {
            $qty.val(currentVal - parseFloat(step));
        }
    }

    $qty.trigger('change');
});

$.fn.disableNumberButtons = function () {
    var value = this.val();

    var minus = this.prev();
    var minAttr = this.attr('min'); 
    var min = (minAttr) ? minAttr : 0;
    (value > min) ? minus.removeClass('is-disabled') : minus.addClass('is-disabled');

    var plus = this.next();
    var maxAttr = this.attr('max');
    var max = (maxAttr) ? maxAttr : 999;
    (value < max) ? plus.removeClass('is-disabled') : plus.addClass('is-disabled');
}

$('input.qty').each(function () {
    $(this).disableNumberButtons();
});

$('input.qty').change(function () {
    $(this).disableNumberButtons();
});