How to remove disabled attribute using jQuery?

jQuery | Remove disabled attribute: In this tutorial, we will learn how to remove the disabled attribute from any element using jQuery? By Pratishtha Saxena, on July 23, 2023

What is 'disabled' attribute in jQuery?

The disabled attribute is used for Form Elements in an HTML document. It ensures that no user is able to access the disabled field, hence, preventing them to enter text, selecting drop-down, clicking buttons, etc. It is generally used when there is a condition to access an appropriate field.

Syntax of disabled attribute

<input type="text" name="username" disabled>

Now, let's see what are the different methods using which 'disabled' attribute can be removed in jQuery.

Following are the two different ways discussed.

Using removeAttr() method
Using prop() method

Remove disabled attribute using removeAttr() method

The removeAttr() method is a built-in method in jQuery that helps to remove the specified attributes of the selected elements from the web page. This method removes everything related to that attribute from the element. That is, it helps to overall delete the selected element's attribute properties and its values.

Syntax

$('selector').removeAttr(attributeName);

This method returns the element with removed properties and values. Since here, we need to remove the disabled attribute of an element, we'll provide the same as its parameters.

Example

The example given below shows the implementation of this method.

<!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>How to remove "disabled" attribute using jQuery?</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <br>
    <button>Comment Below</button><br><br>
    Leave Comments - <input type="text" disabled>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('button').click(function(){
            $('input').removeAttr('disabled');
        })
    })
  </script>
</html>

The output of the above example is:

Remove disabled attribute using prop() method

The prop() method in jQuery helps to set or return the property of the selected element. But in this case, prop() method should be preferred over removeAttr() method because the later will completely remove the disabled property whereas the former will just set it to false.

Syntax

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

Example

The example given below shows the implementation of the prop() method for this case.

<!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>How to remove "disabled" attribute using jQuery?</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <br>
    <button>Comment Below</button><br><br>
    Leave Comments - <input type="text" disabled>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('button').click(function(){
            $('input').prop('disabled', false);
        })
    })
  </script>
</html>

The output of the above example is:

Content editable change event in jQuery

JQuery .each() backwards