Contact Us

Let us know to help you out quickly!

 Vikas     Feb,08 2017

Enable/Disable Link Button in jquery Mobile


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:

<button>Button1</button><input type="button" value="Button2" /><a href="#" data-role="button">Button3</a>

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.

 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'); } } 

See live example here.

Source code here.