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

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 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
    Option 1
    </label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
        Option 2  </label>



<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
    Option 1
    </label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-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

javascripthtmljquerybuttonradio-button


Solution 1:[1]

Make it simple by making one of the radio buttons selected

your code will look like

<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2  </label>


<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21">  Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2  </label>

Solution 2:[2]

$("#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" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />

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

You need tu ose .each() method.

Solution 3:[3]

Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.

$(function(){
    $("input[type='radio']").change(function(){
      let doEnable = true;
      
      $(".form-check-input-wrap").each(function(){
        if($(this).find("input[type='radio']:checked").length == 0){
          doEnable = false;
          return false;
        }
      });
        
      if(doEnable) {
         $("input[type='submit']").prop("disabled", false);
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
    Option 1
    </label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
        Option 2  </label>

</div>

<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
    Option 1
    </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
        Option 2  </label>
</div>

<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
    Option 1
    </label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
        Option 2  </label>
</div>
<input type="submit" disabled="disabled"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gulshan Prajapati
Solution 2 jonu29
Solution 3 Biplob Ahmed

Related Questions