Question

我有一个非常简单的代码，不起作用，我不明白我错过了什么。

外部资源

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

似乎在button('reset')之后，我可以addClass('someclass')，但我无法再禁用该按钮。

为什么这不起作用，我该如何解决？

jsFiddle

Answer 1

不确定这是否正确，但您可以使用解决方法

$(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

Answer 2

您必须在disabled属性的基础上添加一个“禁用”类（它在bootstrap 3中的工作方式相同）：

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

jsFiddle

Answer 3

问题是Button.prototype.setState（）方法中使用的setTimeout：

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

以下是解决方法：

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

（小提琴：http://jsfiddle.net/f0t0n/BKXVA/）

来源：https://github.com/twbs/bootstrap/issues/6242
信用证转到：https://github.com/f0t0n

Answer 4

使用.prop()代替.attr()

更新了代码

$(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

Answer 5

最佳解决方案是：

String[] examples = {"a1", "b1", "c1", "aa1", "bb1", "cc1", "aaa1", "d1", "e1"};
        List<String> values = new ArrayList<String>(Arrays.asList(examples));
values.sort(Comparator.comparing(String::length).thenComparing(String::compareToIgnoreCase));
System.out.println(values);

Answer 6

不幸的是，提出的here好的解决方案对我不起作用，因此我将其重写如下：

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

样式是：

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

重置后jQuery attr（）没有在Bootstrap按钮上工作

外部资源

HTML

的JavaScript

6 个答案:

更新了代码