Using jQuery to Dynamically Disable and Enable an Element

Using jQuery to Dynamically Disable and Enable an Element

There are a few situations where it might be benficial to disable input controls on a form. You can enable and disable elements on a page dynamically with jQuery by setting their attributes accordingly.

Disable a Control

An element can be disabled by using jQuery's attr() method. Let's use a credit card field as an example.

    //attr(attributeName, value);    //this is equivalent to <some_tag disabled="disabled" ...>    $('.creditCard').attr('disabled', 'disabled');

Enable a Control

To re-enable the element, the removeAttr() method should be used. This will completely remove the disabled attribute from the element instead of just blanking it out.


This adds another tool to help improve the overall user experience and reduce the chances for input error.

Robert Greiner

Robert Greiner

Professional optimist. Passionate about cultivating high-performing teams @ scale by integrating the timeless wisdom of the past with the marvel of today's emergent technology in a practical way.

View Comments
Next Post

Practice Better

Previous Post

Using Stopwatches and Timers in .NET

Subscribe for free

Subscribe to my newsletter and get the latest posts delivered right to your inbox for free. I don't spam and your email won't be shared with third-parties.

Thanks for subscribing!

Check your inbox to confirm your subscription.

Please enter a valid email address!