Javascript Jquery/引导程序禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38396041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery/bootstrap disable button
提问by D3181
Hey iv been looking for a solution using JQuery or by modifying the twitter bootstrap class to prevent a button from performing its onclick action aka disabling it. However the results iv found so far have not performed correctly and mostly only give an appearance of being disabled but still perform correctly:
嘿，我一直在寻找使用 JQuery 的解决方案，或者通过修改 twitter 引导程序类来防止按钮执行其 onclick 操作，也就是禁用它。然而，到目前为止，iv 发现的结果并没有正确执行，而且大多数情况下只会出现被禁用但仍然正确执行的外观：
$("#previous").prop('disabled', true);
$("#next").prop('disabled', true);
The purpose is to prevent swapping tabs when the tab index is too high or too low. Most other solutions seem to contain huge amounts of what is seemingly unnecessary Javascript for a feature that seems relatively simple.
目的是防止标签索引过高或过低时交换标签。大多数其他解决方案似乎包含大量看似相对简单的功能看似不必要的 Javascript。
Such as this :
比如这个：
$("#previous").click(function() {
var me = $(this);
me.unbind( "click");
})
Which is supposed to remove the bound function, however would mean also reattaching the event when the tab index increases. Is there a simpler solution available to temporarily disable a button or just prevent the default action from being carried out without removing the event or not displaying the button element?
这应该删除绑定函数，但是也意味着在选项卡索引增加时重新附加事件。是否有更简单的解决方案可以暂时禁用按钮或仅阻止执行默认操作而不删除事件或不显示按钮元素？
Any help would be appreciated :)
任何帮助，将不胜感激 ：）
回答by Erick Gallani
If you are using twitter bootstrap there is this exactly behavior already implemented for you.
如果您正在使用 twitter bootstrap，那么已经为您实现了这种行为。
You just need to change the class .disabledof the element you want to disable.
您只需要更改.disabled要禁用的元素的类。
Like:
喜欢：
$("#previous").addClass('disabled');
回答by Object Manipulator
Let me show a simple example. Here, a button becomes disabled once you click it.
让我举一个简单的例子。在这里，一旦您单击一个按钮，它就会被禁用。
<button class="btn btn-danger">Click Me</button>
$('.btn-danger').on('click', function() {
if ($(this).hasClass('disabled')) {
return false;
} else {
$(this).addClass('disabled');
}
});
回答by Antonio Petricca
Here is my solution:
这是我的解决方案：
Javascript
Javascript
jQuery.fn.extend( {
bsButtonSetStatus : function( status ) {
if ( status ) {
this.removeClass( 'disabled' );
} else {
this.addClass( 'disabled' );
}
},
} );
CSS
CSS
.btn.disabled,
.btn:disabled {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
opacity: 0.25;
pointer-events: none;
}
回答by Shintu Joseph
You would have to prevent the default action using event.preventDefault()
您必须使用以下方法阻止默认操作 event.preventDefault()
$("#previous").click(function(event) {
//add logic to attach style behavior here or conditionally prevent default
event.preventDefault();
});
