How to disable or enable a form element using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery prop() method

You can use the jQuery prop() method to disable or enable form element or control dynamically using jQuery. The prop() method require jQuery 1.6 and above.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>jQuery Disable or Enable Form Element</title>
  • <style type="text/css">
  •     label {
  •         display: block;
  •         margin: 10px 0;
  •     }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  •     $(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>
  •         <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>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.