HTML checkbox validation breaks when there are multiple checkboxes in the form

Question

In the form below, how to ignore the disabled checkbox. The expected behavior in the form is that if the user does not check the Model check box and click on the submit button, form should be submitted. If the Model checkbox is checked, user must enter data. This behavior works as long as there is no other checkbox on the page. If there is another checkbox, and the submit button is clicked without checking the Model checkbox, alert is thrown. How can I ignore the other checkboxes in the form to achieve the desired behavior? Thanks!

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

The checkbox needs to have a unique selector.

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

To ignore the checkbox you don't want to validate you need a way to ignore it in your validation, and you can do that by using the input field. Change the selector for your checkbox from $("input[type=checkbox]:checked") to $(".childModel").prev("input[type=checkbox]:checked")

Example:

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