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.
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.
<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.
<a href="#second" data-role="button">Next</a>
<a href="#second" class="ui-btn-right">Next</a>
What’s the problem then?
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
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/