當表單中有多個復選框時，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" />