什么是禁用/启用按钮和链接的最简单的方法(jQuery + Bootstrap)

@James Donnelly提供了一个全面的答案，它依赖于用一个新函数扩展jQuery。这是一个很好的想法，所以我要调整他的代码，让它以我需要的方式工作。

延长jQuery

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'


setState=($el, state) ->
$el.each ->
$(@).prop('disabled', state) if $(@).is 'button, input'
if state then $(@).addClass('disabled') else $(@).removeClass('disabled')


$('body').on('click', 'a.disabled', -> false)

使用

$('.btn-stateful').disable()
$('#my-anchor').enable()

代码将处理单个元素或元素列表。

按钮和输入支持disabled属性，如果设置为true，它们将看起来是禁用的(感谢引导)，并且在单击时不会触发。

锚点不支持disabled属性，因此我们将依赖.disabled类使它们看起来是禁用的(再次感谢bootstrap)，并通过返回false连接一个默认的单击事件，以防止单击(不需要preventDefault，请参阅在这里)。

请注意:当重新启用锚时，您不需要取消此事件。简单地删除.disabled类就可以了。

当然，如果你在链接上附加了一个自定义的点击处理程序(在使用bootstrap和jQuery时非常常见)，这就没有帮助了。因此，为了解决这个问题，我们将使用isDisabled()扩展来测试.disabled类，如下所示:

$('#my-anchor').click ->
return false if $(@).isDisabled()
# do something useful

我希望这有助于简化一些事情。

按钮

按钮很容易禁用，因为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代码来使用disabled类来调用event.preventDefault():

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

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

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()禁用的元素类型。这样，如果它不是input或button元素，我们可以toggleClass()，如果它是disabled属性，则切换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');

我知道我来晚了，但我要具体回答两个问题:

“我只是想禁用特定的点击内容，以便:

• 它们停止点击
• 他们看起来很残疾

这能有多难?”

它们停止点击

1只;对于像<button>或<input type="button">这样的按钮，需要添加属性:disabled。

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2只;对于链接，任何链接…实际上，任何HTML元素，你都可以使用CSS3 指针事件。

.selector { pointer-events:none; }

浏览器对指针事件的支持在今天的技术水平上是非常棒的(5/12/14)。但我们通常必须支持IE领域的旧浏览器，因此IE10及以下不支持指针事件:http://caniuse.com/pointer-events。因此，使用其他人在这里提到的JavaScript解决方案之一可能是传统浏览器的出路。

有关指针事件的更多信息:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

他们看起来很残疾

显然这是一个CSS的答案，所以:

1只;对于<button>或<input type="button">这样的按钮，使用[attribute]选择器:

button[disabled] { ... }


input[type=button][disabled] { ... }

--

下面是我在这里提到的东西的基本演示:http://jsfiddle.net/bXm5B/4/

希望这能有所帮助。

注意，如果你使用Bootstrap的JS按钮和“loading”状态，会有一个奇怪的问题。我不知道为什么会发生这种情况，但这里有如何解决它。

假设你有一个按钮，并将其设置为加载状态:

var myButton = $('#myBootstrapButton');
myButton.button('loading');

现在你想把它从加载状态中拿出来，但也要禁用它(例如，按钮是一个保存按钮，加载状态表明正在进行验证，验证失败)。这看起来像合理的Bootstrap JS:

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

不幸的是，这将重置按钮，但不会禁用它。显然，button()执行一些延迟任务。所以你也必须推迟你的残疾:

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);

有点烦人，但这是我经常使用的模式。

所有人的回答和贡献都很棒!我不得不稍微扩展这个功能，包括禁用选择元素:

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

似乎对我有用。感谢所有!

这是一个相当晚的答案，但我无意中发现了这个问题，在寻找一种方法禁用启动按钮后点击他们，可能会增加一个很好的效果(f.e旋转)。我发现了一个很棒的库，它可以做到这一点:

< a href = " http://msurguy.github。io / ladda-bootstrap " rel = " http://msurguy.github.io/ladda-bootstrap/ nofollow”> < / >

你只需要包括所需的css和js，添加一些属性到你的按钮和启用lada与javascript…您看!你的按钮有一个新的生命(请检查演示，看看它是多么美丽)!

假设你有文本框和提交按钮，

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

禁用:

要禁用任何按钮，例如，提交按钮，你只需要添加禁用属性为，

$('input[type="submit"]').attr('disabled','disabled');

执行上述代码行后，你的提交按钮html标签看起来是这样的:

<input type="submit" class="btn" value="Submit" disabled/>

注意添加了'disabled'属性。

启用:

用于启用按钮，例如当文本字段中有一些文本时。你需要移除禁用属性来启用按钮，

 if ($('#text-field').val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}

现在上面的代码将删除'disabled'属性。

对于这种行为，我总是使用jQueryUI button小部件，我将它用于链接和按钮。

在HTML中定义标签:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

使用jQuery初始化按钮:

$("#sampleButton").button();
$("#linkButton").button();

使用button小部件方法禁用/启用它们:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

这将处理按钮和游标行为，但如果您需要深入了解并在禁用时更改按钮样式，那么请在页面CSS样式文件中覆盖以下CSS类。

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
background-color:aqua;
color:black;
}

但是请记住:这些CSS类(如果改变了)也会改变其他小部件的样式。

上面的方法并不管用，因为有时候

$(this).attr('checked') == undefined

使用以下命令调整代码

if(!$(this).attr('checked') || $(this).attr('checked') == false){

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

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

假设你在页面上有这样的按钮:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

js代码:

function change(){
var toenable = document.querySelectorAll(".byBtn");
for (var k in toenable){
toenable[k].removeAttribute("disabled");
}
}

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

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

下面这些方法对我来说非常有效:

$("#button").attr('disabled', 'disabled');

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

<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;"