仅当所有问题中的单选按钮都被选中时才启用提交按钮 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"/>