Skip to content

Using jQuery to Dynamically Disable and Enable an Element

Robert Greiner
Robert Greiner

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.

Please consider subscribing, it's free.
Technology

Robert Greiner Twitter

Professional optimist. I write a weekly newsletter for humans at the intersection of business, technology, leadership, and career growth.


Related Posts

Members Public

Navigating the Upside Down as a Technology Leader

Ideas for leading technology organizations with confidence and creativity.

Navigating the Upside Down as a Technology Leader
Members Public

Artist for a Day

The future of creative output is multiplied by AI.

Artist for a Day
Members Public

The Auto Industry's Cloud Awakening

Auto manufacturers are behind the cloud adoption curve but are well-positioned to unlock the future of mobility by building foundational capabilities across six key areas.

The Auto Industry's Cloud Awakening