Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>UPDATE:</p> <p>Since this question still gets a lot of hits I'm also adding the current jQM Docs on how to disable the button:</p> <ul> <li><a href="http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html" rel="noreferrer">http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html</a></li> </ul> <p>Updated Examples:</p> <blockquote> <p><strong>enable enable a disabled form button</strong></p> </blockquote> <pre><code>$('[type="submit"]').button('enable'); </code></pre> <blockquote> <p><strong>disable disable a form button</strong></p> </blockquote> <pre><code>$('[type="submit"]').button('disable'); </code></pre> <blockquote> <p><strong>refresh update the form button</strong> <br />If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p> </blockquote> <pre><code>$('[type="submit"]').button('refresh'); </code></pre> <p>Original Post Below:</p> <p>Live Example: <a href="http://jsfiddle.net/XRjh2/2/" rel="noreferrer">http://jsfiddle.net/XRjh2/2/</a></p> <p>UPDATE:</p> <p>Using @naugtur example below: <a href="http://jsfiddle.net/XRjh2/16/" rel="noreferrer">http://jsfiddle.net/XRjh2/16/</a></p> <p>UPDATE #2:</p> <p>Link button example:</p> <ul> <li><a href="http://jsfiddle.net/gRLYQ/6/" rel="noreferrer">http://jsfiddle.net/gRLYQ/6/</a></li> </ul> <p>JS</p> <pre><code>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; }); </code></pre> <p>HTML</p> <pre><code>&lt;div data-role="page" id="home"&gt; &lt;div data-role="content"&gt; &lt;a href="#" data-role="button" id="myButton"&gt;Click button&lt;/a&gt; &lt;a href="#" data-role="button" id="enableButton"&gt;Enable button&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>NOTE: - <a href="http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html" rel="noreferrer">http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html</a></p> <blockquote> <p>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.</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload