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.

Creative Commons License

What do you think?