Enable disable jQuery Mobile buttons

Written by on April 1, 2015

Enable disable jQuery Mobile buttons

This looks like an easy topic but in reality truth is far from it. Button is probably the most commonly used jQuery mobile widget, surprisingly a lot of people don’t understand how it works. While it is represented as one widget in truth a button is formed from two different components. One button is formed from a classic input tag and second one is formed from an <a> tag.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

1. <input> tag and <button> tag buttons

This is a standard HTML button, of course type=”button” attribute is also needed (in case of a input tag button). Amazingly this is also a less used jQuery Mobile button type.

Example:

<input type="button" value="Click me" class="button-example"/>

2. <a> tag button

Second button type is unique only to the jQuery Mobile. It is formed to <a> tag in combination with a data-role=”button” attribute. There’s another exception, header and footer <a> tag buttons don’t require data-role=”button” attribute.

Example:

<a href="#second" data-role="button">Next</a>

or:

<a href="#second" class="ui-btn-right">Next</a>

What’s the problem then?

For those of you who have read official documentation, button should be able to be disabled through this simple javascript:

$(".button-example").button("disable");

There’s one problem here, this is not explained in the official documentation, only input/button tag buttons can be disabled this way, in case this method is used on a a tag button this error will be thrown:

[quote]cannot call methods on button prior to initialization; attempted to call method ‘disable'[/quote]

Test it in this jsFiddle example: http://jsfiddle.net/Gajotres/KZQqd/

This error will occur because only input tag button has a disable property. Remember when I told you that button widget consists of two components? Well, this is it, most of a button method will work only on an input tag button.

Disable/enable <a> button

To disable a tab button we will need to play with a javascript a bit.

$('.button-example').prop('disabled', true).addClass('ui-disabled');

In this example, prop function will disable this element and addClass function will gray out button visual style. This way, visually, disabled a tag button will look just like disabled input/button tag button. If this button has also events bound to it, that same events will be also disabled.

Test it in this jsFiddle example: http://jsfiddle.net/Gajotres/YFMsR/

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

4 thoughts on “Enable disable jQuery Mobile buttons”

  1. Thank you SO much for clarifying this. I’ve been working with jQM since it’s inception and this problem has always annoyed the hell outta me (and the same goes for “selectmenu”, and its wrapper). I’ve always known the workarounds, but this morning I finally decided to google why because I’m upgrading some old code.

    Do you know if they’re planning to standardize this in jQM 1.5? I read in some stackoverflow comment that they’re going to kill the button widget for objects.

Leave a Reply