jQuery взаимные логи c скрипта (ввод темы заблокирован)

Question

У меня есть простой скрипт: он читает значение ввода quantity и, если он больше 5, jQuery автоматически выберет переключатель # 2. Если значение quantity меньше 5, он выберет переключатель №1.

Теперь моя проблема в том, что этот сценарий делает переключатели неактивными , потому что их состояние строго связано к сценарию. Но мне бы хотелось, чтобы при нажатии переключателя № 2 значение входного сигнала изменилось на 5, а при переключении переключателя № 1 его значение изменилось бы на 1.

Другими словами, я бы хотел, чтобы этот сценарий работать в обе стороны и не блокировать мои кнопки.

$('.mycontainer').on('click', function() {

if (parseInt($('#quantity').val(), 10) >= '5') {
    $('#2radio').prop('checked', true);
}
	else {
	$('#1radio').prop('checked', true);
}
}).click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mycontainer">

  <input type="number" id="quantity" name="quantity" value="1"><br><br>
  
    <input type="radio" id="1radio" name="radio"><label for="1radio">radio button #1</label><br><br>
    <input type="radio" id="2radio" name="radio"><label for="2radio">radio button #2</label>
    
    <div>

Answer 1

Всякий раз, когда вы проверяете radio, событие всплывает и запускает функцию .mycontainer, и, поскольку значение не изменяется, оно повторно выбирает другое радио. Вам просто нужно реализовать новые обработчики для radio s. Так как они изменят вход number, когда функция запускает радиоприемник, выбранное условие будет уже выбрано.

Если вы хотите предотвратить всплытие события и вызвать другую функцию, вы можете вызвать stopPropagation.

Другой вариант - вместо этого нацелить #quantity напрямую .mycontainer, и функция не сработает, поскольку она является родственным элементом, а не элементом-предком.

$('.mycontainer').on('click', function() {
  if (parseInt($('#quantity').val(), 10) >= '5') {
    $('#2radio').prop('checked', true);
  } else {
    $('#1radio').prop('checked', true);
  }
})

$('[type=radio]').click(function(e) {
  e.stopPropagation();
  $('#quantity').val($(this).val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mycontainer">
  <input type="number" id="quantity" name="quantity" value="1"><br><br>
  <input type="radio" id="1radio" name="radio" value="1"><label for="1radio">radio button #1</label><br><br>
  <input type="radio" id="2radio" name="radio" value="5"><label for="2radio">radio button #2</label>
<div>