Home
HTML and JavaScript

How to enable/disable an element using jQuery and JavaScript? Example

6

Sometimes we need to enable and disable input elements like text box, radio buttons, or checkboxes, but every time you make a change you need to reload the HTML? The question is, how can we do it dynamically without loading the page? Well, we can use JavaScript, particularly jQuery to do this. An element can be disabled in HTML by setting disable property to true and enabled again by setting disabled=false. By using jQuery, you can grab the element you want to enable or disable and change this property by using the prop() or attr() function, depending upon the version of jQuery you are using.

The prop() function was added in jQuery 1.6 and its the standard way to deal with properties but attr() function does the same job for jQuery 1.5 and lower version so you can use attr() for the same purpose in jQuery version lower than 1.6.

Btw, you can also enable or disable any HTML element e.g. input text field using plain old JavaScript.

All you need to do is get the element by id and set its disabled property to true or false. You can do that when a user clicks on some button by calling a JavaScript function by using the onclick attribute as shown in our first example.

As a Java web developer, I can say that JavaScript is jQuery is a very important skill. Even though the value of jQuery is gone down a little bit due to their frameworks like React, Angular, and Vue JS and recent enhancements on JavaScript itself like ES 6 features, but it is still a force, and valued in the job market.

Though, if you are a web developer or aspire to become a web developer, I strongly suggest you to take a look at The Web Developer Bootcamp course by Colt Steele, it's one of the best and teaches you all important technologies a web developer should know.

How to enable/disable text field using JavaScript

In this example, we have an HTML form, text boxes, and a couple of buttons to enable and disable that text field. I am using plain JavaScript, no jQuery yet to accomplish the task.

The steps are as follows:

1) Register enable() and disable() function with buttons to enable and disable text field

2) Use the getElementById() to grab the text field

3) Set the disabled field to true or false

Here is the sample HTML file with JavaScript solution:

<html> <head> <title>How to enable or disable input using JavaScript</title> </head> <body> <h2>Enabling and Disabling text field using JavaScript</h2> <form id="registration-form"> Enter your name: <input type="text" id="name"> </form> <button onclick="disable()">Disable the text field</button> <button onclick="enable()">Enable the text field</button> <script> function disable() { document.getElementById("name").disabled = true; } function enable() { document.getElementById("name").disabled = false; } </script> </body> </html>

When you click the button "Disable the text field", the disable() function will be called and disabled property of text field will be set to true, which means you cannot enter text on this text field anymore, it's disabled.

You can re-enable the text field by clicking on "Enable the text field" button, it will call the enable() function which will reset the disabled property to false.

If you want to learn more about JavaScript, I suggest you go through Colt's The Web Developer Bootcamp  and The Advanced Web Developer Bootcamp  courses, two of the best courses for web developers.

How to enable/disable an element using jQuery and JavaScript? Example

How to enable/disable text field using jQuery?

Here is the jQuery code to do the same thing. In this example, we have used prop() function, if you are running on jQuery 1.5 or lower version, just replace the prop() with attr() and it should work fine.

Similar to the previous example, we have two buttons btn_enable and btn_disable to enable and disable the text field.

We attach the event handler using click() function at $(document).ready() which called after page is loaded. On event handler we grab the text field by using jQuery ID selector e.g. $("#name") and then called prop("disabled", false") to disable this text field.

When a user calls the enable button we just set the disabled property to true by calling prop("disabled", true). This enabled the text field again.

Remember, you cannot enter text into a disabled text field, again you can see The Web Developer Bootcamp  to learn more about HTML and different types of input fields.

<html> <head> <title>How to enable or disable textfield using jQuery</title> </head> <body> <h2>Enabling and Disabling text field using jQuery</h2> <form id="registration-form"> Enter your name: <input type="text" id="name"> </form> <button id="btn_disable" >Disable the input</button> <button id="btn_enable" >Enable the input</button> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function() { $("#btn_enable").click(function(){ $("#name").prop("disabled", false); }); $("#btn_disable").click(function(){ $("#name").prop("disabled", true); }); }); </script> </body> </html>

You can test this by running in your browser. Just remember, not to call removeProp() function to enable the button again e.g. removeProp("disabled") because it will remove the "disabled" attribute from the text field and it won't be possible to disable it again in the future, instead just use prop("disabled", false) method.

Btw, if you are new to jQuery I suggest you to first go throughjQuery: Getting Started By Craig Shoemaker to learn basic stuff.

Btw, you would need a Pluralsight membership to access this course, which costs around $29 monthly or $299 annually (14% saving). I have one and I also suggest all developers have that plan because Pluralsight is like NetFlix for Software developers.

It has more than 5000+ good quality courses on all latest topics. Since we programmers have to learn new things every day, an investment of $299 USD is not bad.

Btw, it also offers a 10-day free trial without any obligation which allows you to watch 200 hours of content. You can watch this course for free by signing for that trial.

Anyway, here is the screenshot of how it will look like when you open the page in a browser like Edge or Chrome.

How to enable/disable an element using jQuery and JavaScript? Example

That's all about how to enable and disable an element using JavaScript and jQuery. In this example, we have disabled the text field and re-enabled again but you can use this technique to enable/disable any HTML element. You can use JavaScript or jQuery based upon what is used in your project.

My suggestion is to be consistent. If you are already using JavaScript then use that, but if you are using jQuery then it's better to do it as jQuery way.

Further Reading

The Web Developer Bootcamp by Colt Steele

jQuery Fundamentals By Dan Wahlin

The Complete jQuery Course: From Beginner To Advanced!

Other jQuery and JavaScript tutorials you may like to explore

  • Top 5 jQuery Books Every Web Developer Should Read? (see here)
  • How to get current URL Parameter using jQuery? (solution)
  • How to use multiple jQuery Date picker element in one HTML page? (answer)
  • 10 Examples of jQuery selectors for Web Developers (tutorial)
  • How to redirect web page using jQuery code? (answer)
  • 3 Ways to parse HTML using JSoup in Java? (solution)
  • How to reload/refresh a page using jQuery? (answer)
  • How to prevent double submission of POST data using JavaScript? (solution)
  • How to modify multiple elements in one go in jQuery? (example)
  • How to check and uncheck checkboxes using jQuery? (tutorial)
Thanks for reading this article so far. If you like this article then please share with your friends and colleagues. If you have any question or doubt then please drop a comment.

P. S. - If you don't mind learning from free resources then you can also check out my list of free jQuery courses to start your jQuery journey.