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

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 >
  <div >
    <h3 >1. </h3>
    <h5 >I try to be with people.</h5>
  </div>

  <div >
    <div >
      <input  name="q1" value="1" type="radio">
      <input  name="q1" type="radio" value="2">
      <input  name="q1" type="radio" value="3">
      <input  name="q1" type="radio" value="4">
    </div>
  </div>
</div>


<div >
  <div >
    <h3 >1. </h3>
    <h5 >I am sincere with people.</h5>
  </div>

  <div >
    <div >
      <input  name="q2" value="1" type="radio">
      <input  name="q2" type="radio" value="2">
      <input  name="q2" type="radio" value="3">
      <input  name="q2" type="radio" value="4">
    </div>
  </div>
</div>

<a id="display" >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

CodePudding user response：

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 >
    <div >
      <h3 >1. </h3>
      <h5 >I try to be with people.</h5>
    </div>

    <div >
      <div >
        <input  name="q1" value="1" type="radio">
        <input  name="q1" type="radio" value="2">
        <input  name="q1" type="radio" value="3">
        <input  name="q1" type="radio" value="4">
      </div>
    </div>
  </div>


  <div >
    <div >
      <h3 >1. </h3>
      <h5 >I am sincere with people.</h5>
    </div>

    <div >
      <div >
        <input  name="q2" value="1" type="radio">
        <input  name="q2" type="radio" value="2">
        <input  name="q2" type="radio" value="3">
        <input  name="q2" type="radio" value="4">
      </div>
    </div>
  </div>

  <div >
    <div >
      <h3 >1. </h3>
      <h5 >I am fed up with people.</h5>
    </div>

    <div >
      <div >
        <input  name="q2" value="1" type="radio">
        <input  name="q2" type="radio" value="2">
        <input  name="q2" type="radio" value="3">
        <input  name="q2" type="radio" value="4">
      </div>
    </div>
  </div>
</div>
<a id="display" >next</a>
<button type="submit" id="sub" hidden>Submit</button>