如何仅在选中任一单选按钮时启用下一个按钮？

Question

我有一个向用户显示一些问题的网站，每个问题在单选按钮中有 4 个选项，我的代码如下所示：

$('div.question').hide().first().show();

$('a.display').on('click', function(e) {
      e.preventDefault();
      var that = $('div.question:visible'),
        t = $(this).text();

      if (t == 'next' && that.next('div.question').length > 0) {
        $('div.question').hide();
        that.next('div.question').show()
      }
  });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="question bg-white p-3 border-bottom">
  <div class="d-flex flex-row  question-title">
    <h3 class="text-danger">1. </h3>
    <h5 class="mt-1 ml-2">I try to be with people.</h5>
  </div>

  <div class="ans ml-2">
    <div class="form-check">
      <input class="form-check-input" name="q1" value="1" type="radio">
      <input class="form-check-input" name="q1" type="radio" value="2">
      <input class="form-check-input" name="q1" type="radio" value="3">
      <input class="form-check-input" name="q1" type="radio" value="4">
    </div>
  </div>
</div>

<a id="display" class="btn btn-info btn-sm display si">next</a>

这就是我所做的，但问题是用户可以在不选中单选按钮的情况下转到下一个问题，我想限制这一点，用户应该选中任何单选按钮才能继续下一个问题，谁能告诉我我如何完成这个，提前致谢

Answer 1

我用 style="display:none; 隐藏了“下一个”，并在末尾添加了这个 javascript-code：

<script type="text/javascript">
  $('.form-check-input').click(function(){
    $('#display').show();
  });
</script>

因此，只要用户单击其中一个 radio-buttons，就会显示“下一步”。

完整版阅读

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="question bg-white p-3 border-bottom">
  <div class="d-flex flex-row  question-title">
    <h3 class="text-danger">1. </h3>
    <h5 class="mt-1 ml-2">I try to be with people.</h5>
  </div>

  <div class="ans ml-2">
    <div class="form-check">
      <input class="form-check-input" name="q1" value="1" type="radio">
      <input class="form-check-input" name="q1" type="radio" value="2">
      <input class="form-check-input" name="q1" type="radio" value="3">
      <input class="form-check-input" name="q1" type="radio" value="4">
    </div>
  </div>
</div>
<a id="display" class="btn btn-info btn-sm display si" style="display:none;">next</a>
<script type="text/javascript">
  $('.form-check-input').click(function(){
    $('#display').show();
  });
</script>

Answer 2

另一种方法是在 html 上添加事件并在开头隐藏按钮。

<input class="form-check-input" name="q1" type="radio" value="1" onclick="handleClick(event);" />
<input class="form-check-input" name="q1" type="radio" value="2" onclick="handleClick(event);" />
<input class="form-check-input" name="q1" type="radio" value="3" onclick="handleClick(event);" />
<input class="form-check-input" name="q1" type="radio" value="4" onclick="handleClick(event);" />

js.

$("#display").hide();
function handleClick(e) {
  //console.log(e.target.value);
  $("#display").show();
}

如何仅在选中任一单选按钮时启用下一个按钮？

How can I enable next button only if either one of the radio button is checked?

html

javascript

jquery

radio-button

required