javascript - Can't disable bootstrap button after complete - Stack Overflow

admin管理员组

文章数量:1345074

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

Share Improve this question Follow asked Oct 17, 2012 at 20:14 sanonsanon 6,49122 gold badges2323 silver badges2626 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

本文标签： javascriptCan39t disable bootstrap button after completeStack Overflow