enable submit button only if radio button in all questions are selected jquery-CodePudding

i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:

<h3 >1. Question 1</h3>
<input  value="1" type="radio" name="q1" id="flexRadioDefault1">
<label  for="flexRadioDefault1">
    Option 1
    </label>
<input  type="radio" value="2" name="q1" id="flexRadioDefault1">
<label  for="flexRadioDefault1">
        Option 2  </label>



<h3 >2. Question 2</h3>
<input  value="1" type="radio" name="q1" id="flexRadioDefault1">
<label  for="flexRadioDefault1">
    Option 1
    </label>
<input  type="radio" value="2" name="q1" id="flexRadioDefault1">
<label  for="flexRadioDefault1">
        Option 2  </label>

i want the user to complete all the questions,and only submit after completion, i did something like below:

$(function(){
    $("input[type='radio']").change(function(){
        $("input[type='submit']").prop("disabled", false);
    });
});

<input type="submit" disabled="disabled"/>

however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance

CodePudding user response：

Make it simple by making one of the radio buttons selected

your code will look like

<h3 >1. Question 1</h3>
<input  value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label  for="flexRadioDefault11">Option 1</label>
<input  type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label  for="flexRadioDefaultq12">Option 2  </label>


<h3 >2. Question 2</h3>
<input  value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label  for="flexRadioDefaultq21">  Option 1 </label>
<input  type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label  for="flexRadioDefaultq22"> Option 2  </label>

CodePudding user response：

$("#btn").on("click", function (e) {
  e.preventDefault;
  $(".radio").each(function (index) {
    if (!$(this).is(":checked")) {
      alert(index   "is uncheck");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio"  />
<input type="radio"  />
<input type="radio"  />
<input type="radio"  />
<input type="radio"  />

<button id="btn">submit</button>

You need tu ose .each() method.

CodePudding user response：

Blockquote

1. Question 1 Option 1 Option 2 2. Question 2 Option 1 Option 2