Javascript Jquery/引导禁用按钮

我一直在寻找一个使用JQuery或修改twitter引导类的解决方案，以防止按钮执行onclick操作，也就是禁用它。然而，到目前为止，iv发现的结果没有正确执行，大多数情况下仅显示出被禁用的外观，但仍然正确执行：

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

其目的是防止在选项卡索引过高或过低时交换选项卡。对于一个看起来相对简单的特性，大多数其他解决方案似乎都包含了大量看似不必要的Javascript

例如：

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

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

---

任何帮助都将不胜感激：）

您必须使用

event.preventDefault（）

---

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

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

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

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

点击我
$（'.btn danger'）。在（'click'，function（）上{
if（$（this）.hasClass（'disabled'））{
返回false；
}否则{
$（this.addClass（'disabled'）；
}
});

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

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

.disabled

比如：

以下是我的解决方案：

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

---

这是最好的方法

$（“#previous”）.prop（{disabled:true}）

使用此选项实际上会禁用按钮，不仅为淡入淡出的视图添加类
添加此类类不是最好的主意，因为用户可以轻松转到浏览器的inspect元素并删除此“禁用”类。最好编写一个返回false的附加代码。所有javascript代码都在用户端运行。考虑到将使用开发工具进行检查的用户，该用户几乎可以更改javascript逻辑中的任何内容。这应该只是为了更好的反馈，任何类型的危险行为都应该在后端进行验证。添加@ErickGallani建议的类不会从按钮中删除click事件。对我有效的方法是用“经典”的方式：
$（'previous'）.prop（“disabled”，true）
jQuery.fn.extend( {

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

} );

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