jQuery attr() not working on Bootstrap button after reset

Question

I have a very simple code that doesn't work and I don't understand what I'm missing.

External resources

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

HTML

<p>
    <button id="btn-id" class="btn btn-large btn-primary" type="button" data-loading-text="loading stuff...">Click Me</button>
</p>

JavaScript

$(document).ready(function () {
    $("#btn-id").button();

    $("#btn-id").click(function () {
        //$("#btn-id").attr("disabled",true);
        $(this).button('loading');

        setTimeout(function () {
            //this desn't work. The button resets but it doesn't get disabled afterwards
            $("#btn-id").button('reset').attr("disabled", true);

            //the bellow line works as expected
            //$("#btn-id").button('reset').addClass("btn-success");
        }, 2000);
    });
});

It seems that after button('reset'), I can addClass('someclass') but I can't disable the button anymore.

Why is this not working and how can I fix it?

jsFiddle

Possible duplicate of jquery: Disable/Enable button not working after reset — Georgios
– Georgios, Commented May 25, 2017 at 19:49

Spokey · Accepted Answer · 2013-07-31 11:19:21Z

2

Not sure if this is the right way, but you can use a workaround

$(document).ready(function () {
    $("#btn-id").button();

    $("#btn-id").click(function () {
        $(this).button('loading');
        setTimeout(function () {
            $("#btn-id").addClass('btn-success').data('loading-text', 'OK').button('loading')
        }, 2000);
    });
});

FIDDLE

answered Jul 31, 2013 at 11:19

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Sutu Over a year ago

that is a great idea and it works. Just waiting for couple more thoughts. If not I will mark this as the right answer.

Spokey Over a year ago

@AlexSutu actually you can just leave it in the loading state, you don't need that .button('loading') at the end of my line. I just saw that. the loading state is already the disabled state so it's not a big problem

Alex Sutu Over a year ago

you're right. The workaround was so simple yet I lost couple of hours on this. Not sure though why you can't actually re-add the disabled attribute after reset.

Ra. · Accepted Answer · 2014-07-06 05:16:38Z

2

The problem is the setTimeout used in the Button.prototype.setState() method:

https://github.com/twitter/bootstrap/blob/master/js/bootstrap-button.js#L46

Here is a workaround for this:

var $btn = $('.btn-save');
$btn.button('reset');
setTimetout(function() {
    $btn.attr('disabled', 'disabled'); // Disables the button correctly.
}, 0);

(Fiddle: http://jsfiddle.net/f0t0n/BKXVA/)

Source: https://github.com/twbs/bootstrap/issues/6242
Credit goes to: https://github.com/f0t0n

answered Jul 6, 2014 at 5:16

Ra.

2,5394 gold badges28 silver badges42 bronze badges

Comments

drskullster · Accepted Answer · 2014-01-02 21:42:03Z

1

You have to add a class 'disabled' on top of the disabled attribute (it works the same way in bootstrap 3) :

$("#btn-id").addClass('btn-success').attr('disabled', 'disabled').addClass('disabled').html('OK');

jsFiddle

answered Jan 2, 2014 at 21:42

drskullster

8418 silver badges22 bronze badges

Comments

Clary · Accepted Answer · 2018-07-31 12:13:59Z

The best solution is this :

$(document).ready(function () {
    $btn = $("#btn-id").button();

    $btn.click(function () {
        $(this).data('loading-text', 'Loading wait...');
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });
    });

    // You can callback after completion, essential for those who need to add classes
    $('#reset-button').click(function () {
        $btn.button('reset');
        $btn.dequeue().delay(100).queue(function(){
            console.log('Loading completed');
            // This button
            $(this).addClass('loading-completed');

            // And very important for who callback function, examples:
            /*
            if (typeof callback === 'function') {
                callback(this);
            }
            */
        });// enable button
    });

});//ready

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Use .prop() instead of .attr()

Updated code

$(document).ready(function () {
    $("#btn-id").button();
    
    $("#btn-id").click(function () {
        $("#btn-id").prop("disabled",true);
        $(this).button('loading');
        
        setTimeout(function () {
            //this desn't work. The button resets but it doesn't get disabled afterwards
            $("#btn-id").button('reset').prop("disabled", true);
            
            //the bellow line works as expected
            //$("#btn-id").button('reset').addClass("btn-success");
        }, 2000);
    });
});

jsFiddle demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 31, 2013 at 11:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

Alex Sutu Over a year ago

Thanks for the quick answer. Same result using prop instead of attr.

Alex Sutu Over a year ago

the fiddle you provided still doesn't disable the button after reset. Maybe I'm doing something wrong.

Antonio Petricca · Accepted Answer · 2019-11-06 21:19:29Z

0

The good solution proposed here unfortunately does not work for me, so I have rewritten it as follow:

function( element, status ) {        
    if ( status ) {
        element.removeClass( 'bs-disabled' );
    } else {
        element.addClass( 'bs-disabled' );
    }

    function setStatus() {
        if ( status ) {
            element.removeProp( 'disabled' );
        } else {
            element.prop( 'disabled', true );
        }
    };

    setTimeout( setStatus, 500 );
}

where the style is:

.btn.bs-disabled {
    border: black 1px dotted;
    opacity: 0.1;
}

answered Nov 6, 2019 at 21:19

Antonio Petricca

11.3k6 gold badges47 silver badges91 bronze badges

Collectives™ on Stack Overflow

jQuery attr() not working on Bootstrap button after reset

External resources

HTML

JavaScript

6 Answers 6

3 Comments

Comments

Comments

Comments

Updated code

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

External resources

HTML

JavaScript

6 Answers 6

3 Comments

Comments

Comments

Comments

Updated code

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related