3

How to disable the button in coding using jquery mobile?

<div data-role="button" id="val">Value</div>

[Note : I want to disable the button in the coding, not in the design time]

2
  • are you asking how to stop a submit action? Commented May 2, 2011 at 12:54
  • no.. Just , I want to disable the button. If I am disable the button then it will automatically not perform the any events(click) Commented May 2, 2011 at 13:29

3 Answers 3

6

Live Example: http://jsfiddle.net/LHG4L/5/

HTML:

<div data-role="page">
    <div data-role="content">
        <input type="button" id="theButton" name="theButton" value="The Button">
    </div>
</div>

JS:

$('#theButton').attr('disabled',true);

UPDATE:

Link button example:

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.

Sign up to request clarification or add additional context in comments.

4 Comments

hi.. Thanks.. But Why we cannot the disable the property in the data-role = "button" method? please share your views.
hmm will have to look at this more, if you find a solution please post.
I second Girija's question/request, would be great if same would work for <a data-role="button"> - hope it will be in future jqm releases.
@Mathias updated my answer with a link button example as well
1

You can and should disable it using both jquery and jquerymobile:

$('#theButton').attr('disabled', true);
if ($('#theButton').button) $('#theButton').button('disable')

1 Comment

Use .prop('disabled', true) instead.
1

You can disable button using the attribute class="ui-disabled" as follows:

<a href="index.html" data-role="button" class="ui-disabled">Link button</a> 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.