Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Disable or Enable Form Element</title> <style> label { display: block; margin: 10px 0; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $('form input[type="submit"]').prop("disabled", true); $(".agree").click(function(){ if($(this).prop("checked") == true){ $('form input[type="submit"]').prop("disabled", false); } else if($(this).prop("checked") == false){ $('form input[type="submit"]').prop("disabled", true); } }); }); </script> </head> <body> <form action="/examples/faq/sign-up.php" method="post"> <label>Name: <input type="text" name="username"></label> <label>Email: <input type="email" name="email"></label> <label><input type="checkbox" class="agree"> I agree to terms and conditions.</label> <input type="submit" value="Submit"> </form> </body> </html>
