how to disable / enable jquery mobile buttons?

Question

I am trying to disable the button I tap on and enable the rest. Here is an example

<div class="container">
    <input type="button" class="status" value="Input1">
    <input type="button" class="status" value="Input2" disabled="">
    <input type="button" class="status" value="Input3" disabled="">
</div>

var container = $('.container');

container.on("click", '.status', function () {
    $('.status').prop('disabled', false).button(); // set all buttons to enabled
    $(this).prop('disabled', true).button();  // set the one I clicked to disabled
});

jsfiddle

But it's not working, How can I accomplish enable\disable with jQuery-mobile?

Answer 1

This is the right way to disable after initialization:

$('.status').button('enable');
$(this).button('disable');    

Always check the API site

LIVE DEMO