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

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

and

el.addClass('disabled');​ 

have no effect

Here is the jsfiddle /

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

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

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

and

el.addClass('disabled');​ 

have no effect

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

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

• javascript
• twitter-bootstrap

• I'm not sure if I've got your point, you wanna change the css to disable after clicked? It is?! – felipekm Commented Oct 17, 2012 at 20:18
• Isn't it prohibited to change attributes like disabled of form controls through the DOM due to security reasons? – Manuel Leuenberger Commented Oct 17, 2012 at 20:31
• Yes I want the state to be disabled after the button reaches plete state – sanon Commented Oct 17, 2012 at 21:38

3 Answers 3

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('plete'); }, 2000);

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

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');

@Sherbrow is right but you don't need to wait 2 seconds to disable button. Because .button's setState method is juggling with classes using setTimeout (checkout source code) you just have to do similar eg.:

var $btn = $('#btn');
$btn.button('plete');
setTimeout(function(){ 
    $btn.attr('disabled', 'disabled').addClass('disabled'); 
}, 0);