Disable/enable an input with jQuery?

Learn, how can we enable or disable an input with jQuery?
Submitted by Pratishtha Saxena, on May 28, 2022

Disable in jQuery means to disable the input so that the user is no more able to enter any value to it. It greys out the input field. Once disabled, we can also enable the input if needed.

How to disable/enable an input using jQuery?

To disable or enable any input, we will use prop() method of jQuery.

The prop() method in jQuery which is used to set or return the properties of the selected elements.

Syntax

$("id").prop('disabled', true);

The id of the input field has to be mentioned. To disable the input field, the attribute disabled is written and it is passed as true.

Note: Always make sure to include the jQuery CDN link in the script tag whenever working with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Let's understand this with an example.

An input field 'Name' and a button are created. When the button is clicked, the function is called and it disables the input field. Once the button is clicked the user is no more able to enter anything in that text area. The input field will appear as grey colour area.

Example 1

HTML Code:

<!DOCTYPE html>
<html>
   <head>
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <h1>Name:</h1>
      <input id = "input" type="text" name="name"/>
      <button onclick="enable_disable()">
      Enable/Disable
      </button>
   </body>
</html>

jQuery Function:

<script>
    function enable_disable() {
        $("input").prop('disabled', true);
    }
</script>

Output:

Similarly, to enable that input field, we will just change the disabled from true to false in the function.

Example 2

HTML Code:

<!DOCTYPE html>
<html>
   <head>
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <h1>Name:</h1>
      <input id = "input" type="text" name="name"/>
      <button onclick="enable_disable()">
      Enable/Disable
      </button>
   </body>
</html>

jQuery Function:

<script>
    function enable_disable() {
        $("input").prop('disabled', false);
    }
</script>

Output: