user2810718 user2810718 - 1 year ago 45
Javascript Question

How to disable <a> styled as jquery-ui button using Javascript

I have an HTML element

styled with jquery-ui to appear as a button. The html is shown below:

<a id= "delete-user"class="ui-button ui-widget ui-corner-all">DELETE USER</a>
<a id= "save-user" class="ui-button ui-widget ui-corner-all" style="float:right">SAVE</a>

I have tried setting the disabled attribute of the element in javascript without any success. The code I have tried is shown below.

$("#save-user").attr("disabled", true); //disable save button

The above statement works with
perfectly but not with the

How can I fix this problem?

Answer Source

a elements don't have a disabled state. jQuery UI provides a disable state for its buttons via its own disabledoption, which (as the documentation shows) you set like this:

$("#save-user" .button( "option", "disabled", true );

Side note: On elements that do have a disabled state (like input elements), you use prop (prop("disabled", true)), not attr (attr("disabled", true)), to change the state of that property. (If you use attr, jQuery tries to do the right thing for you anyway, but it's best to understand the difference between properties and attributes and use the correct accessors.) You can use attributes for it, setting is .attr("disabled", "any-string-here") and clearing is .removeAttr("disabled"). But prop is clearer and simpler.

Side note 2: Since your a element isn't a link, consider using button or input instead. They do have a disabled state you can set via prop (but if you do, you have to also tell jQuery UI to update the button appearance via refresh).