How to disable link in jQuery Mobile?

Question

I have a jQuery Mobile Beta 1 site with a jQuery 1.6.1 link button as follows:

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a> 

And in document.ready I set the click event:

 $('#subselection').livequery("click", function(){ alert('test'); }); 

I want to disable this "link" and I tried

 $('#subselection').button('disable') 

And this command sets the button style as if it was disabled, but the click event works.

I also tried

 $('#subselection').prop('disabled', true); 

and $ ('# subselection'). prop ('disabled'); gives true but does not turn off.

Someone has a good idea.

Answer 1

The a element does not have a disabled property. Therefore, defining one will not affect any event handlers that you could connect to it.

example: http://jsfiddle.net/niklasvh/n2eYS/

See HTML 5 for a list of available attributes.

To solve your problem, instead you can, for example, assign disabled as data in an element:

$('#subselection').data('disabled',true);

and then in your case check if its set is installed:

if (!$(this).data('disabled'))

example: http://jsfiddle.net/niklasvh/n2eYS/5/

Answer 2

Example link button:

• http://jsfiddle.net/gRLYQ/6/

Js

 var clicked = false; $('#myButton').click(function() { if(clicked === false) { $(this).addClass('ui-disabled'); clicked = true; alert('Button is now disabled'); } }); $('#enableButton').click(function() { $('#myButton').removeClass('ui-disabled'); clicked = false; }); 

HTML

 <div data-role="page" id="home"> <div data-role="content"> <a href="#" data-role="button" id="myButton">Click button</a> <a href="#" data-role="button" id="enableButton">Enable button</a> </div> </div> 

NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

Connections created as buttons have all the same visual parameters as the true ones based on the shape of the button below, but there are several important differences. Link-based buttons are not part of the button plugin and simply use the basic buttonMarkup plugin to create button styles so that the button methods of the form (enable, disable, update) are not supported. If you need to disable a button based on a link (or any element), you can use the disabled ui-disabled class yourself using JavaScript to achieve the same effect.

Answer 3

In this case, there is no need for jquery / javascript. Just add the class "ui-disabled".

Such as:

 <a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a> 

Here is what I do and it works for me;)

Answer 4

try using

 $('#subselection').button().button('disable'); //disable in JQM $('#subselection').button().button('enable'); //enable in JQM 

this seems to be visually displayed to show the disable / enable style ... HOWEVER, that the "button" is still clickable (so see !: P)

Answer 5

I know that there is already an accepted answer to this question, but I think this answer is much easier to understand. Just return the false function.

 <a id="subselection" href="#" data-role="button" data-theme="b">TEST</a> <script> $('#subselection').click(function() { alert("do some code here"); return false; }); </script> 

Answer 6

You can also just use the button tag / widget directly to <button>TEST</button> , which has the correct disconnect. If you just use it to catch an event and run some kind of JavaScript, you don’t know what advantage would be when using a link.