How to disable a link button in jQuery Mobile?

Question

I have a jQuery Mobile Beta 1 website with jQuery 1.6.1 link button like this:

<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 whant to disable this "link button" and i tried

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

And that command set the button style like it is disabled but the click event works.

I have also tried

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

and $('#subselection').prop('disabled'); gives true but its not disabled.

Someone has a good idea.

Answer 1

Link button example:

• 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

Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

Answer 2

The a element does not have a property disabled . So defining one won't affect any event handlers you may have attached to it.

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

For a list of available attributes, have a look at the HTML 5 reference .

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

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

and then in your event check if its set:

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

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

Answer 3

No need for jquery/javascript in this case. Simply add a 'ui-disabled' class.

Like for example:

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

Thats 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 work visually to display a disable / enable style...HOWEVER the "button" is still clickable (so watch out! :P )

Answer 5

I know there's already an accepted answer to this, but I think this answer is much easier to understand. Just have the click function return false.

<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 could alternatively just use the button tag/widget directly <button>TEST</button> which does have proper disabling. If you are just using it to catch an event and run some JavaScript not sure what advantage there would be in using a link.