CODEWITHSUNDEEP
jquerybuttonjquery-mobile
Andrew
Andrew

Reputation: 15

Disabling a button element on page load in jQuery Mobile

I have what is likely a simple problem, whereby I am trying to get a jquery mobile button to be disabled upon page initialization, with the following:

<body>
<section id="firstpage" data-role="page-content">
  <header data-role="header">
    <h1>Working with Buttons</h1>
  </header>
  <div data-role="content">
    <p>This is a &lt;button&gt; element:</p>
    <button id="btn1">button element</button>
  </div>
</section>
<script>
  $("#firstpage").live('pageinit', function (evt) {
    $("#btn1").button("disable");
  });
</script>
</body>

The page loads with all the jquery mobile formatting and behaviors as expected, but the button remains enabled. Any ideas? What very simple detail am I missing here?

Upvotes: 1

Views: 2381

Answers (1)

Jasper
Jasper

Reputation: 76003

Just add the disabled=true attribute. jQuery Mobile will read that attribute and initialize the widget as disabled.

Here is a demo: http://jsfiddle.net/CDYgD/

Also, data-role="page-content", page-content is not a valid jQuery Mobile data-role for a pseudo-page element, it should be just page unless you've made some type of customization. Docs for this: http://jquerymobile.com/demos/1.1.0-rc.2/docs/api/data-attributes.html (look for Page header)

Upvotes: 1

Related Questions