Как запретить нажимать кнопку большезаданного?

Question

[Grizar]

Имею такую разметку (кнопка опенкар)

<li class="p-qty">
       <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">В наличии шт:   </font>
        </font>
        <span class="pr-quantity">
          <font style="vertical-align: inherit;">
             <font style="vertical-align: inherit;">47</font>
          </font>
       </span>
</li>

здесь нам важна цифра 47, она может бытьлюбая, это кол-чо товара в наличии.

далее имею выбор количества, кнопочки + - , это добавить убрать товар
вот код, скопировал с скриптом, чтоб было понятно

<div>
               <span class="qty">
              <label class="control-label text-qty" for="input-quantity">Количество</label>
              <a href="javascript:;" class="journal-stepper">
              <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">   -    </font>
              </font>
              </a>
             
              <input type="text" name="quantity" value="1" size="2" data-min-value="1" id="input-quantity" class="form-control">   ///////эта строка показывает само поле с цифрами где добавляется количество ,т.е. цифры меняются
              
              <a href="javascript:;" class="journal-stepper">
              <font style="vertical-align: inherit;">
              <font style="vertical-align: inherit;">   +  </font>
              </font>
              </a>
              <input type="hidden" name="product_id" value="2923">
              
              <script>
                /* quantity buttons */
                var $input = $('.cart input[name="quantity"]');
                function up() {
                  var val = parseInt($input.val(), 10) + 1 || parseInt($input.attr('data-min-value'), 10);
                  $input.val(val);
                }
                function down() {
                  var val = parseInt($input.val(), 10) - 1 || 0;
                  var min = parseInt($input.attr('data-min-value'), 10) || 1;
                  $input.val(Math.max(val, min));
                }
                $('<a href="javascript:;" class="journal-stepper">-</a>').insertBefore($input).click(down);
                $('<a href="javascript:;" class="journal-stepper">+</a>').insertAfter($input).click(up);
                $input.keydown(function (e) {
                  if (e.which === 38) {
                    up();
                    return false;
                  }
                  if (e.which === 40) {
                    down();
                    return false;
                  }
                });
              </script>
              </span>
                <button type="button" id="button-cart" data-loading-text="Φόρτωση..." class="button">
                <span class="button-cart-text">
                <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">Корзина</font>
                </font>
                </span>
                </button>
                <button type="button" pa="true" class="btn btn-success btn-lg btn-block" id="pa-btn">
                <i class="fa fa-bell-o">  </i>  &nbsp;Ενημερώστε με!   </button>

                			
                              </div>

эта строка , между + и -

<input type="text" name="quantity" value="1" size="2" data-min-value="1" id="input-quantity" class="form-control">

Вопрос, нужен скрипт, который подхватит изменяющуюся цифру при нажатии на плюсик + , которая между + и - , и отключит (не даст нажать больше) плюсик + , если эта цифра будет больше чем заданная, в нашем случае 47, т.е. когда уже 47 , плюсик отключили.
При нажатии на + или - в строке (которую выделял выше), которая между + и - , ничего не происходит..

<input type="text" name="quantity" value="1" size="2" data-min-value="1" id="input-quantity" class="form-control">

вообщем вот такой вот вопрос

Comments

[tukreb]

ну так просто сделайте её disabled, в чём проблема? Правда вам всё равно нужно будет перепроверять на бэкенд, так как фронтенд в априори не может предоставить никаких защитных мер.

[Сергей delphinpro]

Вопрос, нужен скрипт, который подхватит изменяющуюся цифру при нажатии на плюсик + , которая между + и - , и отключит (не даст нажать больше) плюсик + , если эта цифра будет больше чем заданная, в нашем случае 47, т.е. когда уже 47 , плюсик отключили.

вы уже описали решение задачи.
Решение, а не вопрос!
Осталось сделать именно то, что вы описали.

[ArtyomOchkin]

Похоже, вам уже ответили. Хочу лишь сказать, что тег <font> не желателен, т.к. он исключён из спецификации html5. Удачи!

Answer 1

[artem]

Все просто.

<script>
  $(document).ready(function() {
    var maxQuantity = parseInt($('.pr-quantity').text().trim());

    function updateQuantity(val) {
      var $input = $('#input-quantity');
      var currentVal = parseInt($input.val(), 10);
      currentVal = isNaN(currentVal) ? 1 : currentVal;
      $input.val(Math.min(currentVal + val, maxQuantity));

      if (currentVal + val >= maxQuantity) {
        $('.journal-stepper').last().prop('disabled', true);
      } else {
        $('.journal-stepper').last().prop('disabled', false);
      }
    }

    $('.journal-stepper').first().click(function() {
      updateQuantity(-1);
    });

    $('.journal-stepper').last().click(function() {
      updateQuantity(1);
    });

    $('#input-quantity').keydown(function(e) {
      if (e.which === 38) {
        updateQuantity(1);
        return false;
      }
      if (e.which === 40) {
        updateQuantity(-1);
        return false;
      }
    });
  });
</script>

Comments

[Grizar]

почему-то при клике по 2 прибавляет, наверное из-за того скрипта что плюсики добавляет
...
но работает)

Answer 2

[Grizar]

было

var val = parseInt($input.val(), 10) + 1 || parseInt($input.attr('data-min-value'), 10);
                  $input.val(val);
                }
                function down() {
                  var val = parseInt($input.val(), 10) - 1 || 0;
                  var min = parseInt($input.attr('data-min-value'), 10) || 1;

стало
в этих строках скрипта который был, единицы заменил на ноли, вроде теперь клацает правильно

var val = parseInt($input.val(), 10) + 0 || parseInt($input.attr('data-min-value'), 10);
                  $input.val(val);
                }
                function down() {
                  var val = parseInt($input.val(), 10) - 0 || 0;
                  var min = parseInt($input.attr('data-min-value'), 10) || 1;

Answer 3

[Сергей delphinpro]

в вашем случае все просто.

Если кол-во меньше либо равно нулю, то облом.
Если больше либо равно максимуму, то облом.

Вопрос в том, как проверяется реальное кол-во остатков?

Comments

[Grizar]

нинадобольше ничего проверять,а то только то что описал

[Сергей delphinpro]

Grizar, да. больше ничего проверять не надо. только то, что я написал.