有时我使用样式为按钮的锚,有时我只使用按钮。我想禁用特定的点击东西,以便:

他们看起来很残疾 它们不再被点击

我该怎么做呢?


当前回答

我知道我的回答晚了,但在我看来,这是切换按钮“启用”和按钮“禁用”的最简单的方法。

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}

其他回答

我想不出更简单的办法了!: -)


使用锚标签(链接):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

要启用Anchor标签:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");


禁用Anchor标签:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

下面这些方法对我来说非常有效:

$("#button").attr('disabled', 'disabled');

@James Donnelly提供了一个全面的答案,它依赖于用一个新函数扩展jQuery。这是一个很好的想法,所以我要调整他的代码,让它以我需要的方式工作。

延长jQuery

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'

setState=($el, state) ->
    $el.each ->
        $(@).prop('disabled', state) if $(@).is 'button, input'
        if state then $(@).addClass('disabled') else $(@).removeClass('disabled')

    $('body').on('click', 'a.disabled', -> false)

使用

$('.btn-stateful').disable()
$('#my-anchor').enable()

代码将处理单个元素或元素列表。

按钮和输入支持disabled属性,如果设置为true,它们将看起来是禁用的(多亏了bootstrap),并且在单击时不会触发。

锚点不支持disabled属性,因此我们将依赖.disabled类使它们看起来是禁用的(再次感谢bootstrap),并通过返回false连接一个默认的click事件来阻止单击(不需要preventDefault参见这里)。

注意:当重新启用锚时,您不需要取消此事件。简单地删除.disabled类就可以了。

当然,如果你在链接上附加了一个自定义的点击处理程序(在使用bootstrap和jQuery时非常常见),这就没有帮助了。因此,为了解决这个问题,我们将使用isDisabled()扩展来测试.disabled类,如下所示:

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful

我希望这有助于简化一些事情。

这是一个相当晚的答案,但我无意中发现了这个问题,在寻找一种方法禁用启动按钮后点击他们,可能会增加一个很好的效果(f.e旋转)。我发现了一个很棒的库,它可以做到这一点:

http://msurguy.github.io/ladda-bootstrap/

你只需要包括所需的css和js,添加一些属性到你的按钮和启用lada与javascript…您看!你的按钮有一个新的生命(请检查演示,看看它是多么美丽)!

上面的方法并不管用,因为有时候

$(this).attr('checked') == undefined

使用以下命令调整代码

if(!$(this).attr('checked') || $(this).attr('checked') == false){