Jquery/bootstrap禁用按钮

D31*_*181 9 html javascript jquery twitter-bootstrap twitter-bootstrap-3

嘿iv一直在寻找使用JQuery的解决方案,或者通过修改twitter bootstrap类来防止按钮执行其onclick操作,即禁用它.然而,到目前为止我发现的结果没有正确执行,并且大部分只是给出了被禁用但仍然正确执行的外观:

$("#previous").prop('disabled', true);
$("#next").prop('disabled', true);
Run Code Online (Sandbox Code Playgroud)

目的是防止选项卡索引太高或太低时交换选项卡.大多数其他解决方案似乎包含大量看起来不必要的Javascript,这个功能似乎相对简单.

比如这样:

$("#previous").click(function() {
  var me = $(this);
  me.unbind( "click");            
})
Run Code Online (Sandbox Code Playgroud)

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

任何帮助,将不胜感激 :)

Eri*_*ani 14

如果您正在使用twitter bootstrap,那么已经为您实现了这种确切的行为.

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

喜欢:

$("#previous").addClass('disabled');
Run Code Online (Sandbox Code Playgroud)

  • 所有javascript代码都在用户端运行.考虑使用开发工具进行检查的用户,该用户几乎可以更改javascript逻辑中的任何内容.这应该只是为了获得更好的反馈,任何类型的危险行为都应该在后端验证. (3认同)
  • 按照@ErickGallani 的建议添加类并没有从按钮中删除点击事件。对我有用的是“经典”方式:`$('#previous').prop("disabled", true);` (2认同)

Obj*_*tor 5

让我展示一个简单的例子。在此,单击按钮将禁用该按钮。

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

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

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});
Run Code Online (Sandbox Code Playgroud)