How to disable or enable a form element with jQuery?

by Yang Yang on April 16, 2009

You need 2 jQuery functions: attr and removeAttr.

To disable a form element such as a text input or a button (with a made-up id: #elm):

$("#elm").attr("disabled", "disabled");

To enable a disabled form element:

$("#elm").removeAttr("disabled");
Andrea January 3, 2010 at 5:54 pm

Ty very much!

Bashar April 30, 2010 at 2:01 am

Very useful, thanks.

Ken Collins July 13, 2011 at 4:02 am

The jQuery docs say to use prop() for things like disabled, checked, etc. Also the more concise way is to use their selectors engine. So to disable all form elements in a div or form parent.

$myForm.find(‘:input:not(:disabled)’).prop(‘disabled’,true);

And to enable again.

$myForm.find(‘:input:disabled’).prop(‘disabled’,false)

Wade August 1, 2011 at 9:51 am

If you have one field to change, uou can also do it with $(‘#checkboxfield’)[0].disabled = true

faeb187 November 10, 2011 at 7:22 pm

@wade: native javascript is always faster than the jquery way.. in your case use: document.getElementById( “checkboxfield” ).disabled = true…

miguelgilmartinez November 8, 2012 at 8:55 pm

Beware of disabling form elements….. they won’t be seen in the server side……

Doug Estep November 17, 2012 at 10:43 pm

I created a widget that can completely disable or present a read-only view of the content on your page. It disables all buttons, anchors, removes all click events, etc., and can re-enable them all back again. It even supports all jQuery UI widgets as well. I created it for an application I wrote at work. You’re free to use it.

Check it out at ( http://www.dougestep.com/dme/jquery-disabler-widget ).

Comments on this entry are closed.

Previous post:

Next post: