Присвоение класса disabled к input[type='number']

656

25 ноября 2016, 08:54

Перерисовал input[type='number'] под нужный мне стиль. Всё работает отлично и точно так, как я и хотел. Остался последний штрих - хочу сделать так, чтобы если число в инпуте равняется минимально возможному, то чтобы кнопке слева присваивался класс disabled. Точно так же и с правой кнопкой - если достигнуто максимально возможное число для инпута - присваивать ей класс disabled. Пытался повесить обновление кнопок на $(input).on('change', function(e){});, но ничего толком не получилось. И как можно сделать так, чтобы максимальное значение, например, второго и третьего инпутов равнялось текущему значению первого инпута? Спасибо.

https://jsfiddle.net/JamesJGoodwin/gf89qa8m/10/

Answer 1

Ну как то так: https://jsfiddle.net/gf89qa8m/11/

$(function NumericOperations() {
    var input = $('.numeric-input');
    var minus = input.prev('a.minus');
    var plus = input.next('a.plus');
  minus.html(function() {
    var min = $(this).next(input).attr('min');
        if($(this).next(input).val() == min){
        $(this).addClass('disabled');
    };
  });
  plus.on('click', function() {
    var max = $(this).prev(input).attr('max');
        if($(this).prev(input).val() == max){
        $(this).addClass('disabled');
    };
  });
  minus.on('click', function() {
        var min = $(this).next(input).attr('min');
        if($(this).next(input).val() !== min) {
            var current_int = parseInt($(this).next(input).val(), 10);
            $(this).next(input).val(--current_int);
      $(this).parents('.numeric-selector').find('a').removeClass('disabled');
        }else{
        $(this).addClass('disabled');
    }
    });
    plus.on('click', function() {
        var max = $(this).prev(input).attr('max');
        if($(this).prev(input).val() !== max) {
            var current_int = parseInt($(this).prev(input).val(), 10);
            $(this).prev(input).val(++current_int);
      $(this).parents('.numeric-selector').find('a').removeClass('disabled');
        }else{
        $(this).addClass('disabled');
    }
    });
});