Question

点击按钮时我正在做一些AJAX

            $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显示在控制台中，但该按钮不会被禁用。加载和重置按钮工作正常。我尝试了.addClass('disabled')和.attr('disabled','disabled')，但那些也没有用。

见这里：http://codepen.io/anon/pen/Wvbeeg

Answer 1

问题是button('reset')是异步的。您可以在html中观看更改，看看它们不是即时的

重置后的短暂延迟解决了问题，但是我个人只是自己编写整个过程而不是使用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

Answer 2

您应该附加禁用属性，以便Bootstrap可以设置样式按钮（它是基于html属性的css样式）

 [...]
 $trigger.attr("disabled", true);
 [...]

你可以在这里看到一个工作示例：http://codepen.io/anon/pen/oXNRww（ajax请求已被setTimeout替换）

Answer 3

卸下：

$btn.button('reset');

出于某种原因，直到您禁用它之后才会进行评估。（这是异步的）

不是使用“重置”代码重置按钮，而是删除disabled属性（如果存在）可能更好。如果按钮应该处于活动状态，这将有效地启用该按钮。

修改后的代码：

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

额外提示：请勿使用.removeProp（）重新启用该按钮。这将完全删除该属性，您将无法再次使用它。有关prop（）的更多信息，请访问：https://api.jquery.com/prop/

Answer 4

这是因为您使用jQuery将click事件绑定到按钮。因此禁用属性将无法阻止它。在您的代码中，您需要添加以下内容：

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

这将取消按钮中的事件。

无法使用jQuery禁用Twitter引导按钮？

4 个答案: