user2810718 user2810718 - 2 months ago 8
Javascript Question

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

I have an HTML element

<a>
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
<input>
perfectly but not with the
<a>
.

How can I fix this problem?

Answer

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).

Comments