僅當所有問題中的單選按鈕都被選中時才啟用提交按鈕 jquery

Question

我有一個簡單的 html 表單，其中有 50 個問題，所有問題都有自己的單選按鈕選項，如下所示：

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

我希望用戶完成所有問題，並且只在完成后提交，我做了如下的事情：

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

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

但這並不准確，因為如果用戶完成 1 個問題，提交按鈕會啟用，任何人都可以告訴我如何完成此操作，在此先感謝

Answer 1

通過選擇其中一個單選按鈕使其變得簡單

你的代碼看起來像

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

你需要.each()方法。

Answer 3

每個廣播問題都應該有一個唯一的名稱，因此我將它們更改為 q1,q2,q3。 甚至我為每個問題塊添加了一個包裝器。 每當回答一個問題時，我都會循環每個問題塊並檢查是否有任何塊仍未得到回答。 如果任何塊（問題）未得到回答，doEnable 變量將更改為 false 並且循環中斷。

 $(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"/>