Twitter Bootstrap Question posted in

Cannot disable Twitter bootstrap button with jQuery?

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

Tags:

3

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search