javascript - 返回时，单选按钮之间的导航不起作用

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

问题是因为您正在嵌套事件处理程序。要解决此问题，请分离逻辑，以便您根据 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 检查器，或者在输入上按回车键来提交表单，所以最好覆盖可能性。