Enable/Disable Link Button in jquery Mobile

Hi,

I am developing mobile application, where I use jquery Mobile.

Buttons can be created by input tag, button tag and even link tag. See examples:

[code:xml]

<button>Button1</button>

<input type="button" value="Button2" />

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

[/code]

In docs, I see enable/disable method for button. See.

But using this method, it can only set style, functionally it doesn’t! May be they missed it!

Anyway, I got some trick to make link enable/disable.

HTML5 now has data attribute that user can use it, browser will ignore it while rendering it.

So Disabling a link, I just remove href and onclick value to some data attribute and vice versa.

[code:js] function test(){ if ($("#mytest").parent().attr("aria-disabled") == "true") { $("#mytest").attr("href", $("#mytest").attr("data-href")); $("#mytest").attr("onclick", $("#mytest").attr("data-onclick")); $("#mytest").button(‘enable’); } else { $("#mytest").attr("data-href", $("#mytest").attr("href")); $("#mytest").attr("data-onclick", $("#mytest").attr("onclick")); $("#mytest").attr("href","#"); $("#mytest").attr("onclick","return"); $("#mytest").button(‘disable’); } } [/code]

See live example here.

Source code here.