StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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><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> </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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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