There is a script whose task is to add or decrease a numerical value in the input. And the work of the script should be organized so that if the minimum value is reached, the minus button becomes inactive. The same rule is equivalent to the plus button. But the script works crookedly - when the minimum value is reached, then the button must be pressed again and only then it will become inactive. How to fix it? Tried to reduce the limits of values - does not help.
HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="lists-content"> <div class="list-item"> <span class="list-name" data-description="Старше 12 лет">Взрослые</span> <div class="numeric-selector"> <a class="minus disabled"><i class="material-icons">remove</i></a> <input type="number" class="numeric-input" min="1" max="9" readonly="" value="1"> <a class="plus"><i class="material-icons">add</i></a> </div> </div> <div class="list-item"> <span class="list-name" data-description="От 2 до 12 лет">Подростки</span> <div class="numeric-selector"> <a class="minus disabled"><i class="material-icons">remove</i></a> <input type="number" class="numeric-input" min="0" max="9" readonly="" value="0"> <a class="plus"><i class="material-icons">add</i></a> </div> </div> <div class="list-item"> <span class="list-name" data-description="До 2 лет">Младенцы</span> <div class="numeric-selector"> <a class="minus disabled"><i class="material-icons">remove</i></a> <input type="number" class="numeric-input" min="0" max="9" readonly="" value="0"> <a class="plus"><i class="material-icons">add</i></a> </div> </div> </div> CSS:
body { font-family: 'Open Sans', sans-serif; width: 200px } .lists-content { position: relative; overflow: hidden; z-index: 12; background: #fff; padding: 18px; border-radius: 4px; } .lists-content > .list-item { position: relative; display: inline-block; width: 100%; margin: 0 0 12px; } .lists-content > .list-item:last-child { margin: 0; } .lists-content > .list-item > .list-name { position: relative; font-size: 0.825rem; float: left; display: inline-block; text-align: left; } .lists-content > .list-item > .list-name:after { position: relative; content: attr(data-description); font-size: 0.6rem; display: block; color: #9e9e9e; } .lists-content > .list-item > .numeric-selector { position: relative; display: inline-block; float: right; font-size: 0; padding: 2px 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .lists-content > .list-item > .numeric-selector a { position: relative; display: inline-block; cursor: pointer; width: 24px; height: 24px; color: #e0e0e0; -webkit-transition: all .25s; transition: all .25s; } .lists-content > .list-item > .numeric-selector ai { font-size: 22px; } .lists-content > .list-item > .numeric-selector a.minus { border-radius: 2px 0 0 2px; border: 1px solid #e0e0e0; } .lists-content > .list-item > .numeric-selector a.minus:hover { border: 1px solid #ef9a9a; color: #ef9a9a; } .lists-content > .list-item > .numeric-selector a.minus.disabled:hover { border-radius: 2px 0 0 2px; border: 1px solid #e0e0e0; color: #e0e0e0; cursor: default; } .lists-content > .list-item > .numeric-selector a.plus { border: 1px solid #e0e0e0; border-radius: 0 2px 2px 0; } .lists-content > .list-item > .numeric-selector a.plus:hover { border: 1px solid #8bc34a; color: #8bc34a; } .lists-content > .list-item > .numeric-selector a.plus.disabled:hover { border: 1px solid #e0e0e0; border-radius: 0 2px 2px 0; color: #e0e0e0; cursor: default; } .lists-content > .list-item > .numeric-selector input { position: relative; display: inline-block; outline: 0; width: 24px; height: 24px; font-size: 14px; text-align: center; border-left: 0; border-right: 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; margin-top: -22px; vertical-align: middle; z-index: 1; -moz-appearance: textfield; } Js:
$(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'); } }); }); Example of work on jsfiddle: https://jsfiddle.net/euk328n7/1/
