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

Question

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

Answer 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>

Answer 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.

Answer 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"/>