Плюс / минус максимальное значение ввода

У меня есть кнопка плюс / минус, и мне бы хотелось, чтобы пользователи не могли выбрать более 20, но не знали, как заставить ее работать. Я пытался использовать атрибуты min="1" max="5, но они не работали. Вот мой код и ссылка на скрипку. https://jsfiddle.net/6n9298gp/

<form id='myform' method='POST' action='#' class="numbo">
<input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" />
<input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
</form>

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

        }
    });
// 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 > 1) {
        // Decrement one
        $('input[name='+fieldName+']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(1);
        $('.qtyminus').val("-").css('color','#aaa');
        $('.qtyminus').val("-").css('cursor','not-allowed');
    }
});
});
</script>
Источник

4 ответа

Решение

Я обновил jsfiddle здесь: https://jsfiddle.net/6n9298gp/5/

По сути, просто добавили блок, который будет проверять, что текущее значение меньше 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');
}

Также добавлена ​​строка для удаления курсора, не разрешенного при уменьшении:

// Decrement one only if value is > 1
$('input[name='+fieldName+']').val(currentVal - 1);
$('.qtyplus').val("+").removeAttr('style');
Источник

<input type="number" min="1" max="20" step="1">

Затем вы можете использовать скрипт для доставки проверочных сообщений (только потому, что сообщения, встроенные в браузеры для числового поля, в настоящее время плохие).

Это удаляет зависимости от библиотек, соответствует спецификации HTML и имеет встроенный доступ бесплатно.

Если вам все еще нужны кнопки +/−, чтобы удовлетворить ограничение дизайна, убедитесь, что вы используете символ минус (&#8722;), а затем постепенно улучшайте свой сценарий поверх правильного типа поля. Таким образом, любой сценарий, в котором ваш jQuery не загружается (например, сбой в работе сети) или имеется ошибка сценария на странице, не приведет к сбою всего этого.

Если вы не удовлетворяете требованиям дизайна с помощью кнопок +/–, рассмотрите возможность их полной потери.

Вы также можете постепенно улучшать это для браузеров, которые могут бороться с type="number" (хотя вы можете видеть, что поддержка довольно хороша pattern поддержка еще лучше) без сценария, поместив сопоставление с образцом в элемент, хотя это довольно привлекательный случай:

<input type="number" min="1" max="20" step="1" pattern="[0-9]*">

Вы можете прочитать больше на type="number" в спецификации HTML5 или в справочнике по языку.

Источник

Попробуйте добавить условие, чтобы проверить значение меньше максимального значения.

$('.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) && 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');

            }
        });


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) && 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');

            }
        });
    // 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 > 1) {
            // Decrement one
            $('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');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='myform' method='POST' action='#' class="numbo">
    <input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" />
    <input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
    <input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
    </form>

Источник
Другие вопросы по тегам