禁用未选中单选按钮的下一个按钮仅适用于 jquery 中的第一个元素

Question

在我的 html 网站上，我有几个问题，每个问题都有单选按钮作为答案，我希望用户只有在选择问题的任何单选按钮时才继续下一个问题，我做了以下操作代码：

$('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) {
    if ($('input[type=radio]:checked').length > 0) {
      $('div.question').hide();


      that.next('div.question').show()
    } else {
      alert("Please Select an Option !");
    }
  }

});

<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>


<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 am sincere with people.</h5>
  </div>

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

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

这仅适用于第一个问题，在第一个问题之后，用户可以在不选中单选按钮的情况下单击下一步按钮，谁能告诉我如何解决这个问题，在此先感谢

Answer 1

你的代码片段只有两道题，我加进去测试发现你需要查看visible题的收音机来测试你是否可以进行下一步

隐藏上一个问题的下一个

const $questions = $('div.question').hide().first().show();
const $sub = $("#sub");
const $next = $('#display')
  .on('click', function(e) {
    e.preventDefault();
    var that = $('div.question:visible'),
      t = $(this).text(),
      $nextQuestion = that.next('div.question'),
      moreQuestions = $nextQuestion.length > 0;
    if (t == 'next' && moreQuestions) {
      if ($('input[type=radio]:checked', that).length > 0) {
        $('div.question').hide();
        $nextQuestion.show()
      } else {
        alert("Please Select an Option !");
      }
    }
    const last = $nextQuestion.index() === $questions.length
    $next.toggle(last);
    $sub.toggle(!last);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="questions">
  <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>


  <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 am sincere with people.</h5>
    </div>

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

  <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 am fed up with people.</h5>
    </div>

    <div class="ans ml-2">
      <div class="form-check">
        <input class="form-check-input" name="q2" value="1" type="radio">
        <input class="form-check-input" name="q2" type="radio" value="2">
        <input class="form-check-input" name="q2" type="radio" value="3">
        <input class="form-check-input" name="q2" type="radio" value="4">
      </div>
    </div>
  </div>
</div>
<a id="display" class="btn btn-info btn-sm display si">next</a>
<button type="submit" id="sub" hidden>Submit</button>

禁用未选中单选按钮的下一个按钮仅适用于 jquery 中的第一个元素

disabling next button without radio button checked working only for 1st element in jquery

html

javascript

jquery

radio-button

required