Jquery/引导程序禁用按钮

Question

嘿，我一直在寻找使用 JQuery 的解决方案，或者通过修改 twitter 引导程序类来防止按钮执行其 onclick 操作，也就是禁用它。 然而，到目前为止，iv 发现的结果并没有正确执行，而且大多数情况下只会出现被禁用但仍然正确执行的外观：

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

目的是防止标签索引过高或过低时交换标签。 大多数其他解决方案似乎包含大量看似相对简单的功能看似不必要的 Javascript。

比如这个：

$("#previous").click(function() {
  var me = $(this);
  me.unbind( "click");            
})

这应该删除绑定函数，但是也意味着在选项卡索引增加时重新附加事件。 是否有更简单的解决方案可以暂时禁用按钮或仅阻止执行默认操作而不删除事件或不显示按钮元素？

任何帮助将不胜感激:)

Answer 1

如果您正在使用 twitter bootstrap，那么已经为您实现了这种行为。

您只需要更改要禁用的元素的类.disabled 。

像：

$("#previous").addClass('disabled');

Answer 2

让我举一个简单的例子。 在这里，一旦您单击一个按钮，它就会被禁用。

<button class="btn btn-danger">Click Me</button>

$('.btn-danger').on('click', function() {

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});

Answer 3

这是我的解决方案：

Javascript

jQuery.fn.extend( {

    bsButtonSetStatus : function( status ) {
        if ( status ) {
            this.removeClass( 'disabled' );
        } else {
            this.addClass( 'disabled' );
        }
    },

} );

CSS

.btn.disabled,
.btn:disabled {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.25;
    pointer-events: none;
}

Answer 4

您必须使用event.preventDefault()阻止默认操作

$("#previous").click(function(event) {
  //add logic to attach style behavior here or conditionally prevent default
      event.preventDefault();    
});

Answer 5

这是执行此操作的最佳方法。

$("#previous").prop({disabled: true});

使用它实际上会禁用按钮，而不仅仅是为褪色视图添加一个类