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.

Solution 1

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/

Solution 2

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.

Solution 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 ;)

Solution 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 )

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

View more solutions

Comments

[RickardP]

Looks like its works good, going to try it on my project, thanks!

[Haroldo_OK]

This option is actually better than the currently accepted answer (Niklas'), since the button will actually look like it is disabled and jQuery Mobile will automagically ignore clicks coming from buttons that have the 'ui-disabled' class. It just makes one wonder why jQM develpers didn't take the extra, apparently tiny, final step and simply made some enable/disable methods available for link-based buttons.

[Phill Pafford]

@Haroldo_OK Thanks! I think jQM does offer something a little better with 1.1.0 jquerymobile.com/demos/1.1.0/docs/buttons/buttons-methods.ht‌​ml

[Dmytro]

Thanks, this actually helped me. Because I had some strange issues with disabling links like $('a').click(function (e){e.preventDefault();}); and then enabling again with $('a').click(function (e){ //do old stuff again });. Do old stuff was some how stuck in infinite loop after reimplementing click handler.

[xgretsch]

The best option for me so far, since it sorts out the button styling as well as affecting the operation.