CODEWITHSUNDEEP
javascriptjquery-mobile
Valery Bulash
Valery Bulash

Reputation: 413

Disable jQuery button - no recipes still

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

Answers (5)

hazzik
hazzik

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 underlying buttonMarkup 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

Jack
Jack

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

lt.kraken
lt.kraken

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

ShaneBlake
ShaneBlake

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

coolpal
coolpal

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

Related Questions