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

Question

in my html website i have few questions where each questions have radio buttons as answers, i want the user to proceed to next question only when he selects any radio button of the question, i did the following code:

$('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>

here this works only for 1st question, after the 1st question, user is able to click next button without checking radio button, can anyone please tell me how to fix this, thanks in advance

Answer 1

You only have two questions in your snippet, I added on to test and found that you need to check the radios of the visible question to test if you can go next

Hiding the next on last question

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>