Cannot disable Twitter bootstrap button with jQuery?

Question

I am doing some AJAX when a button is clicked

            $btn.button('loading');
            $.ajax({
                type: 'PUT',
                url: 'event/',
                data: put_data,
                dataType: 'json',
                success: function(data){
                    if (data.redirect) {
                        window.location = data.redirect;
                    }
                    else {
                        $btn.button('reset');

                        if ($btn.is('#my-btn')) {
                            console.log('disabling button');
                            $btn.prop('disabled', true);
                        }
                    }
                }
            });

disabling button shows up in the console, but the button does not get disabled. Loading and resetting the button works just fine. I tried .addClass('disabled') and .attr('disabled','disabled'), but those also don't work.

See here: http://codepen.io/anon/pen/Wvbeeg

When you look at the DOM structure, does the button have the "disabled" property? Or is that not being set either? — Kivak Wolf, Apr 23 '15 at 20:00
You might also look here for help: http://stackoverflow.com/questions/15122526/disable-button-in-jquery — Kivak Wolf, Apr 23 '15 at 20:01
@KivakWolf it flashes the disabled attribute for a split second then disappears. http://codepen.io/anon/pen/Wvbeeg — Patrick Yan, Apr 24 '15 at 18:51

score 1 · Accepted Answer · answered Apr 24 '15 at 19:45

1

The problem is that button('reset') is asynchronous. You can watch the changes live in the html an see they aren't immediate

A short delay after reset resolves the problem, but personallly i would just code this whole process myself instead of using the bootstrap API

$(document).ready(function() {
  $('#mybutton').click(function() {
    var $btn = $(this);
    $btn.button('loading');
    setTimeout(function() {/// mimic ajax delay
      $btn.button('reset');
      setTimeout(function() {//  short delay after reset
        $btn.prop('disabled', true);

      }, 200);

    }, 1000);

  });
});

DEMO

answered Apr 24 '15 at 19:45

charlietfl

170,828
13
121
150

Isn't it dangerous to rely on a timeout of an ambiguous number of 200 milliseconds? Wouldn't that leave you open to potential problems if the computer is under load? – Kivak Wolf Apr 24 '15 at 20:56
1

@KivakWolf yes that's why I suggested getting completely away from using bootstrap button API. – charlietfl Apr 24 '15 at 21:07

Kivak Wolf · Answer 2 · 2015-04-24T20:57:37.100

Remove:

$btn.button('reset');

For some reason, this doesn't evaluate until after you disable it. (It's asynchronous)

Rather than resetting the button using the 'reset' code, it might be better to just remove the disabled property if it exists. That will effectively enable the button if it should be active.

Modified code:

        $btn.button('loading');
        $.ajax({
            type: 'PUT',
            url: 'event/',
            data: put_data,
            dataType: 'json',
            success: function(data){
                if (data.redirect) {
                    window.location = data.redirect;
                }
                else {
                    if ($btn.is('#my-btn')) {
                        console.log('disabling button');
                        $btn.prop('disabled', true);
                    } else {
                        $btn.prop('disabled', false);
                    }
                }
            }
        });

Bonus tip: Don't use .removeProp() to re-enable the button. That will completely remove the property and you won't be able to use it again. More about prop() here: https://api.jquery.com/prop/

score -1 · Answer 3 · answered Apr 24 '15 at 21:39

-1

It's because you are using jQuery to bind a click event to the button. So the disable property won't be able to stop it. In your code you will need to add this:

 $('#mybutton').off('click');

That will unbind the event from the button.

answered Apr 24 '15 at 21:39

Hoyen

2,511
1
12
13

Cannot disable Twitter bootstrap button with jQuery?

3 Answers3