Can't disable bootstrap button after complete

Question

It's pretty simple: after calling bootstrap button('complete') on an element el,

el.attr('disabled', 'disabled');​ 

and

el.addClass('disabled');​ 

have no effect

Here is the jsfiddle http://jsfiddle.net/D2RLR/2732/

This is what I expect (jsfiddle of it working with 'loading'): http://jsfiddle.net/xgKZd/

Answer 1

It seems to be merely a timing problem : if you "wait" before setting the disabled class and attribute, it works : Demo (jsfiddle)

The plugin uses a timeout of 0 (check the source for more info) but it seems to "take" more time. Just add some delay or do the button effect yourself so that you can control the order of actions.

setTimeout(function() { $('#bton').button('complete'); }, 2000);

setTimeout(function() { $('#bton').attr('disabled', 'disabled').addClass('disabled'); }, 4000);

Answer 2

I was having this same problem and wanted to share an alternative solution. You can change the loading-text data atrribute value. So if you have a button:

<button id='myButton' data-loading-text="Loading..." type="submit">Save</button>

And you initially do something and want to show the "Loading..." message

$('#myButton').button('loading');

Then when you're all done, you can do something like this:

$('#myButton').data('loading-text','Done!').button('loading');