jQuery prop() disable or enable a form element

Introduction

Use the jQuery prop() method to disable or enable form elements or controls like <input>, <select>, <textarea>, etc.

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Disable or Enable Form Element</title>
<style>
  label {//from www .j  a  va  2 s.  com
    display: block;
    margin: 10px 0;
  }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.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="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>

Previous Next