如果你像我一样，只是想禁用一个按钮，请不要错过隐藏在这篇长文章中的简单答案:

 $("#button").prop('disabled', true);

假设你有这样的，目前是启用的。

<button id="btnSave" class="btn btn-info">Save</button>

只要加上这个:

$("#btnSave").prop('disabled', true);

你会得到这个，它会禁用按钮

<button id="btnSave" class="btn btn-primary" disabled>Save</button>

如果你想禁用可点击，你也可以在html中添加内联这个

style="cursor: not-allowed;"

按钮

禁用按钮很简单，因为disabled是一个由浏览器处理的按钮属性:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

要使用自定义jQuery函数禁用这些功能，只需使用fn.extend():

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle禁用按钮和输入演示。

否则，您将使用jQuery的prop()方法:

$('button').prop('disabled', true);
$('button').prop('disabled', false);

锚标记

值得注意的是，disabled不是锚标记的有效属性。出于这个原因，Bootstrap在它的.btn元素上使用以下样式:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

注意[disabled]属性和.disabled类是如何作为目标的。disabled类是使锚标记显示为禁用所需要的。

<a href="http://example.com" class="btn">My Link</a>

当然，这不会阻止链接在单击时正常工作。上面的链接会把我们带到http://example.com。为了防止这种情况，我们可以添加一段简单的jQuery代码来使用禁用类来调用event.preventDefault():

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

我们可以使用toggleClass()来切换禁用类:

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle禁用链接演示。

结合

然后，我们可以扩展前面的disable函数，使用is()检查我们试图禁用的元素类型。这样，如果它不是输入或按钮元素，我们可以toggleClass()，如果它是disabled属性，我们可以切换它:

// Extended disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

完全结合JSFiddle演示。

值得进一步注意的是，上述函数也适用于所有输入类型。

我想不出更简单的办法了!: -)

使用锚标签(链接):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

要启用Anchor标签:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

禁用Anchor标签:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

我知道我的回答晚了，但在我看来，这是切换按钮“启用”和按钮“禁用”的最简单的方法。

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}