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:


<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.

Advertisements

One thought on “Enable/disable link button in jquery Mobile

  1. been looking for code like this all over the place. Thank you for the code. one suggestion, on your live code, you could also add a $(“#button_edit”).attr(“href”,”#href_link”); so the button will work again. Thanks again

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s