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

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
Members Public

Off Topic Thursday: Apple Keynote Event Reflections

Igor and Robert nerd out on the recent Apple Keynote Event from October 13th 2020 and share their reflections about exceptional production value, new products, and Apple’s evolution as an organization.