Jquery/bootstrap 禁用按钮答案

【问题标题】：Jquery/bootstrap disable buttonJquery/bootstrap 禁用按钮
【发布时间】：2016-07-15 12:23:17
【问题描述】：

嘿，我一直在寻找使用 JQuery 或修改 twitter 引导类以防止按钮执行其 onclick 操作（即禁用它）的解决方案。然而，到目前为止发现的结果 iv 并没有正确执行，而且大多只是显示被禁用但仍然正确执行：

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

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

比如这样：

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

应该删除绑定功能，但是也意味着在标签索引增加时也会重新连接事件。是否有更简单的解决方案可用于暂时禁用按钮或仅阻止执行默认操作而不删除事件或不显示按钮元素？

任何帮助将不胜感激:)

【问题讨论】：

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

喜欢：

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

【讨论】：

添加这样的类并不是最好的主意，因为用户可以轻松地转到浏览器的检查元素并删除这个“禁用”类。最好写一个返回 false 的附加代码。
所有javascript代码都在用户端运行。考虑到将使用开发工具进行检查的用户，该用户几乎可以更改 javascript 逻辑中的任何内容。这应该只是为了更好的反馈，任何类型的危险行为都应该在后端进行验证。
按照@ErickGallani 的建议添加类并没有从按钮中删除点击事件。对我有用的是“经典”方式：$('#previous').prop("disabled", true);

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

这是最好的方法。

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

使用这个实际上禁用了按钮，而不仅仅是为淡入淡出的视图添加一个类

【讨论】：