Using JavaScript to Disable a Button

We can use JavaScript to disable a submit button on a form. The easiest way to do this is by using the disabled property.

document.getElementById("button1").disabled = true;

Here we can use the disabled property of the button input, and change its disabled property to true.

An example of using JavaScript to enable/disable a button on a form

Below we will have a simple form with name and email fields and a submit button. One thing that is common in a lot of online forms is having a checkbox that a user must click on to agree to certain terms/conditions. So below we will have a form that only lets you submit the information if you agree to the terms/conditions, by checking the checkbox. Here is the HTML code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="checkbox" id="checkbox" name="checkbox" value="Checkbox" onclick="checkClick()">
  <label for="checkbox"> I agree to the terms and conditions.</label><br><br>
  <button id="button1" type="submit" value="Submit" disabled>Submit</button>
</form>

We will then use Javascript to disable or enable the submit button based on whether the checkbox is checked or not. We attach an onclick event to the checkbox that will run the checkClick() function below. This can also be done using jQuery. Here is the code to do it using JavaScript:

function checkClick(){
  if( document.getElementById("checkbox").checked ){
    document.getElementById("button1").disabled = false;
  } else {
    document.getElementById("button1").disabled = true;
  } 
};

The final code and output for this example of how to enable and disable a submit button using JavaScript is below:

Code Output:

Full Code:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="checkbox" id="checkbox" name="checkbox" value="Checkbox" onclick="checkClick()"><label for="checkbox"> I agree to the terms and conditions.</label><br><br>
  <button id="button1" type="submit" value="Submit" disabled>Submit</button>
</form>

<script>

function checkClick(){
  if( document.getElementById("checkbox").checked ){
    document.getElementById("button1").disabled = false;
  } else {
    document.getElementById("button1").disabled = true;
  } 
}

</script>