Навигация между переключателями не работает при переходе назад

Question

Требования:

1. Нажмите на кнопку-переключатель Согласен --- Сделайте что-нибудь
2. Нажмите на кнопку-переключатель Не согласитесь --- Сделайте что-нибудь

Это в первый раз работает совершенно нормально.

Проблема возникает, когда вы нажимаете радиокнопку "не согласен", а затем снова нажимаете "согласиться". Он не вызывает функциональность, определенную в разделе «согласен» (т. Е. Кнопка отправки все еще должна быть в отключенном режиме), и наоборот. Запрашивая ваше предложение, пожалуйста.

$('input[type=radio][name=choice]').change(function() {
  if (this.value == 'Agree') {
    $('#submit').click(function(event) {
        event.preventDefault();
      }
    )
  } else if (this.value == 'Disagree') {
    $('#submit').removeAttr('disabled');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="choice" value="Agree" id="agree_radio">Agree</label> label>
<input type="radio" name="choice" value="Disagree" id="disagree_radio">Disagree</label>
<button type="submit" class="btn btn-success" name="btn" value="resp_form" disabled="disabled" id="submit">Submit</button>

Answer 1

Попробуйте этот код. Я надеюсь, что это поможет вам.

$('input[type=radio][name=choice]').change(function() {
  if (this.value == 'Agree') {  $('#submit').removeAttr('disabled');
    $('#submit').click(function(event) {
        event.preventDefault();
        console.log("in agreeeeee")
      }
    )
  } else if (this.value == 'Disagree') {
    $('#submit').removeAttr('disabled');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="choice" value="Agree" id="agree_radio">Agree</label> 
<input type="radio" name="choice" value="Disagree" id="disagree_radio">Disagree</label>
<button type="submit" class="btn btn-success" name="btn" value="resp_form" disabled="disabled" id="submit">Submit</button>

Answer 2

Проблема в том, что вы вкладываете обработчики событий. Чтобы устранить проблему, разделите логи c, чтобы включить кнопку на основе выбранного радио в обработчике событий change. Затем создайте отдельный обработчик для отправки формы, который проверяет, установлен ли переключатель «Согласен», и предотвращает событие, если нет. Попробуйте это:

var $radios = $('input[type="radio"][name="choice"]').change(function() {
  $('#submit').prop('disabled', $(this).val() === 'Disagree');
});

$('#yourForm').on('submit', function(e) {
  if ($radios.filter(':checked').val() !== 'Agree') {
    e.preventDefault();
    console.log('disagree checked, form submission cancelled');
  } else {
    console.log('submitting form...');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="yourForm">
  <label>
    <input type="radio" name="choice" value="Agree" id="agree_radio">
    Agree
  </label>
  <label>
    <input type="radio" name="choice" value="Disagree" id="disagree_radio">
    Disagree
  </label>
  <button type="submit" class="btn btn-success" name="btn" value="resp_form" disabled="disabled" id="submit">Submit</button>
</form>

Теоретически, форму никогда не следует отправлять, когда проверено «Не согласен», поскольку кнопка отключена, но люди все равно могут связываться с инспектором DOM или нажимать вернитесь к входным данным, чтобы отправить форму, поэтому лучше охватить возможные случаи.