Using jQuery to Dynamically Disable and Enable an Element

By Robert Greiner on 16 Nov 2010.

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. 

    $('.creditCard').removeAttr('disabled');

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