Reputation: 413
Browse internet to find how to disable button:
<td valign="center" halign="left"><a href="#" id="save-user" data-role="button" data-inline="true" data-theme="b" data-icon="check">Save</a></td>
There were most of recipes with no result:
$('#operator-modify').ready( function () {
// None of the below disable button
//$("#save-user").attr("disabled", true).button("refresh");
//$('#save-user').addClass('ui-state-disabled').attr('disabled', true);
//$('#save-user').attr('disabled', 'disabled').addClass( 'ui-state-disabled');
});
Finally - how to enable / disable button?
Upvotes: 2
Views: 239
Reputation: 13374
The jQuery mobile has several types of buttons. The first one from the "basics" page is <a data-role="button">
. This type of buttons can be disabled by applying .ui-disabled
class:
$('#operator-modify').ready( function () {
$('#save-user').addClass('ui-disabled');
});
There is a note about links styled as button in documentation.
Note: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the
button
plugin and only just use the underlyingbuttonMarkup
plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.
Other type of buttons is <input type="button">
and <button>
. This type of buttons can be disabled with calling "disable" method of "button" widget.
$('#operator-modify').ready( function () {
$('#save-user').button('disable');
});
Complete example: http://jsfiddle.net/xH7W3/3/
Upvotes: 2
Reputation: 11003
When you use a link tag as a button (that is adding data-role="button"
) JQM the buttonMarkup plugin to apply the button widgets markup/styling but does not actually create a button widget. Since you don't actaully have a button widget you can't use the button widgets methods (enable, disable etc.), instead to disable or enable your "button" you need to add/remove the ui-disabled
class.
$('#save-user').addClass("ui-disabled");
And here is a simple jsBin
As a side note if your not using your button for navigation you might want to use a form button (input
, button
), if you do use a regular button then you can instead use the JQM buttons disable method.
Upvotes: 4
Reputation: 1300
You are using an anchor < a> element. Which does not have an attribute like disabled. To disable an anchor element, you could do the following:
$("#save-user").click(function(e) {
e.preventDefault();
});
the preventDefault makes sure that any HTML / browser reaction will be cancelled.
If you'd simply like to disable a button, which could either be an input < input> element or a < button> element, you could simply do the following:
<input type="button" value="Click Me" disabled/>
Upvotes: -1
Reputation: 11096
You're not trying to disable a button, but an anchor <a>
tag.
Either convert to use <button>
or use an .click()
to return false
when it shouldn't go anywhere / do anything.
You might also need to define another style for your anchor when it is "disabled"
I'd recommend using <button>
, though...
Upvotes: 0
Reputation: 31
what you have is not a button. It's an html anchor tag. That's the reason why the button related disable features aren't working for you.
If you can change the <a>
tag to a <button>
tag or <input type="button" />
then the following should work.
$("#save-user").attr("disabled", true);
If you cant change that to a button, then you can add style class to make the hyperlink look disabled (grey color and mouse cursor normal instead of pointer), and prevent default on click.
Upvotes: 0