Disable Button in jQuery (With Examples)

Disable Button in jQuery: In this tutorial, we will learn how can we disable a button in a document using jQuery? Learn disabling buttons with the help of examples and multiple approaches using jQuery. By Pratishtha Saxena, on July 21, 2023

Disabling the button is a common development task in web design, it's important in many places where some processes are going on. We need to disable the button when a form is being submitted so that users should not click on the buttons again. In such cases, the button should be disabled until the task is not completed. There are two methods in jQuery that can be used anytime to disable a button as required.

Using the prop() method
Using the attr() method

Let's discuss them each.

1. Disable a button using prop() method in jQuery

To disable a button in jQuery, you can simply use the prop() method by providing the property name disabled and its value True. The prop() method sets or returns the property of the selected element. When the property has to be set, then along with the property name, property value is also to be given.

Consider the below syntax of the prop() method:

$('selector').prop('propertyName','value');

This method sets the attribute of all the matched elements and returns the property value of the first matched element. Using this, a button can be set as disabled which will disallow the user to click it.

Script to disable a button using prop() method

Using the below-given script to disable a button:

<script>
  $(document).ready(function(){
  	$('button').prop('disabled',true);
  })
</script>

jQuery example to disable a button using prop() method

In the below-given example, we are using jQuery's prop() method to disable a button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Disable Button in jQuery</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <br>
    <button>Disabled</button>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('button').prop('disabled',true);
    })
  </script>

</html>

The output of the above example is -

2. Disable a button using attr() method in jQuery

You can use the "attr() method to disable a button in jQuery by providing the property name and its value, where the property name is "disabled and the value is "True. The "attr() method sets or returns the attribute of the selected element. When the attribute has to be returned, then the name of the property (attribute) is defined and it will return the value of the matched attribute of the element. When the attribute has to be set, then along with the property name, property value is also to be given.

Consider the below syntax of the "attr() method:

$('selector').attr('propertyName');
$('selector').attr('propertyName','value');

This method sets the attribute of all the matched elements and returns the attribute value of the first matched element. The value has to be set to true for disabling the button, and false for enabling it.

Script to disable a button using attr() method

Using the below-given script to disable a button:

<script>
  $(document).ready(function(){
      $('button').attr('disabled',true);
  })
</script>

jQuery example to disable a button using attr() method

In the below-given example, we are using jQuery's attr() method to disable a button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Disable Button in jQuery</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <br>
    <button>Disabled</button>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('button').attr('disabled',true);
    })
  </script>

</html>

The output of the above example is -

How to detect DIV's dimension changed using jQuery?

How to wait 5 seconds with jQuery?