在没有单选按钮的情况下禁用下一个按钮

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

您的片段中只有两个问题，我添加了测试，发现您需要检查可见问题的收音机，以测试您是否可以在下

一个问题上隐藏下一个问题

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>