当表单中有多个复选框时，HTML复选框验证会中断

Question

在下面的表格中，如何忽略已禁用的复选框。 表单中的预期行为是，如果用户未选中“模型”复选框并单击“提交”按钮，则应提交表单。 如果选中了模型复选框，则用户必须输入数据。 只要页面上没有其他复选框，此行为就起作用。 如果还有另一个复选框，并且在未选中“模型”复选框的情况下单击了“提交”按钮，则会引发警报。 如何忽略表单中的其他复选框以实现所需的行为？ 谢谢！

 $(document).ready(function () { $('#checkModelBtn').click(function() { var isCheckboxChecked = $("input[type=checkbox]:checked").length; var isTextEntered = $("input.childModel").val().length; if ( isTextEntered || !isCheckboxChecked ) { //alert("validation passed!"); } else { alert("Please enter the Model Number"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr> <td> <p><h2>MODEL:</h2></p> <input type="checkbox"> Model # <input type="text" size="12" class="childModel"><BR> </td> <td> THIS CHECKBOX BREAKS THE FUNCTIONALITY<p> <input type="checkbox" checked disabled> Some text here</td> </tr> </table> <hr> <input type="submit" name="submit" value="submit" id="checkModelBtn"/> 

Answer 1

该复选框需要有一个唯一的选择器。

 $(document).ready(function () { $('#checkModelBtn').click(function() { var isCheckboxChecked = $("input[name='model_number']:checked").length; var isTextEntered = $("input.childModel").val().length; if ( isTextEntered || !isCheckboxChecked ) { //alert("validation passed!"); } else { alert("Please enter the Model Number"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr> <td> <p><h2>MODEL:</h2></p> <input type="checkbox" name="model_number"> Model # <input type="text" size="12" class="childModel"><BR> </td> <td> THIS CHECKBOX BREAKS THE FUNCTIONALITY<p> <input type="checkbox" checked disabled> Some text here</td> </tr> </table> <hr> <input type="submit" name="submit" value="submit" id="checkModelBtn"/> 

Answer 2

要忽略您不想验证的复选框，您需要一种在验证中忽略它的方法，您可以使用输入字段来做到这一点。 将您的复选框选择器从$("input[type=checkbox]:checked")更改$(".childModel").prev("input[type=checkbox]:checked")

例：

 $(document).ready(function() { $('#checkModelBtn').click(function() { var isCheckboxChecked = $(".childModel").prev("input[type=checkbox]:checked").length; var isTextEntered = $("input.childModel").val().length; if (isTextEntered || !isCheckboxChecked) { //alert("validation passed!"); } else { alert("Please enter the Model Number"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr> <td> <p> <h2>MODEL:</h2> </p> <input type="checkbox"> Model # <input type="text" size="12" class="childModel"> <BR> </td> <td> THIS CHECKBOX BREAKS THE FUNCTIONALITY <p> <input type="checkbox" checked disabled> Some text here</td> </tr> </table> <hr> <input type="submit" name="submit" value="submit" id="checkModelBtn" />