Отключить кнопку уменьшения, если поле ввода достигает начального значения

Question

Я использовал приведенный ниже код для увеличения и уменьшения поля ввода на 1. Мне нужно отключить кнопку минус ( - ) по умолчанию. Если начальное значение равно 5, пользователь не должен уменьшать значение менее чем 5. Если они go до 6, включите кнопку «минус» для уменьшения. Но, они не должны уменьшаться менее чем на 5.

Код иногда срабатывает. В случайном порядке кнопка отключена и не может уменьшаться даже с 10 до 9, 8, 7.

Пожалуйста, дайте мне знать, будет ли это решение работать или нужно изменить любое другое.

let $noofpaxinput = $('#txtnoofpax');
$noofpaxinput.val(5);
let intialvalue = $noofpaxinput.val();

$('.noofpax').click(function() {
  if ($(this).hasClass('increasepax')) {
    $noofpaxinput.val(parseInt($noofpaxinput.val()) + 1);
    $('.decreasepax').prop('disabled', false);
  } else if ($noofpaxinput.val() >= intialvalue) {
    let getPaxVal = $noofpaxinput.val(parseInt($noofpaxinput.val()) - 1);
    if (getPaxVal <= intialvalue) {
      $('.decreasepax').prop('disabled', true);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fee-amount">
  <button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
  <input id="txtnoofpax" type="text" value="5">
  <button type="button" class="noofpax increasepax">+</button>
</div>

Answer 1

Вы можете прослушать изменение ввода и определить, следует ли отключить кнопку уменьшения

Не забудьте parseInt, потому что ваш тип input - текст. Если вы не проанализируете его, '10' < '5' вернет true

let $noofpaxinput = $("#txtnoofpax")
$noofpaxinput.val(5)
let intialvalue = $noofpaxinput.val()

$noofpaxinput.on('change', function () {
  if (Number($noofpaxinput.val()) <= Number(intialvalue)) {
    $(".decreasepax").prop("disabled", true)
  } else {
    $(".decreasepax").prop("disabled", false)
  }
})

$(".noofpax").click(function () {
  if ($(this).hasClass("increasepax")) {
    $noofpaxinput.val(Number($noofpaxinput.val()) + 1).trigger("change")
  }

  if ($(this).hasClass("decreasepax")) {
    $noofpaxinput.val(Number($noofpaxinput.val()) - 1).trigger("change")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fee-amount">
  <button type="button" disabled="disabled" class="noofpax decreasepax">-</button>
  <input id="txtnoofpax" type="text" value="5">
  <button type="button" class="noofpax increasepax">+</button>
</div>

Answer 2

Вам нужно проверять значение .txtnoofpax внутри события функции щелчка, чтобы получать его каждый раз, когда пользователь щелкает.

И затем вам нужно использовать else в вашем последнем условии.

var noofpaxinput = $('#txtnoofpax'), noofpaxinputInitVal = $(noofpaxinput).val(); 

$(noofpaxinput).on("input", function(){
  checkNoofpaxinput($(noofpaxinput).val(), noofpaxinputInitVal);
});

$('.noofpax').click(function(){
  var txtnoofpaxValue = $(noofpaxinput).val();
  
  if ($(this).hasClass('increasepax')){
    $(noofpaxinput).val(parseInt(txtnoofpaxValue)+1);
  } else if ($(this).hasClass('decreasepax')){
    $(noofpaxinput).val(parseInt(txtnoofpaxValue)-1);
  }
  
  checkNoofpaxinput($(noofpaxinput).val(), noofpaxinputInitVal);
});

function checkNoofpaxinput(fromValue, Tovalue) {
  if (parseInt(fromValue) <= parseInt(Tovalue)) {
    $('.decreasepax').prop('disabled', true);
  } else {
    $('.decreasepax').prop('disabled', false);  
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="fee-amount">
   <button type="button" disabled="disabled" class="noofpax decreasepax">-</button> 
   <input id="txtnoofpax" type="text" value="5"> 
   <button type="button" class="noofpax increasepax">+</button>
</div>