如何使用 jQuery 动态启用/禁用链接？答案

【问题标题】：How do I dynamically enable/disable links with jQuery?如何使用 jQuery 动态启用/禁用链接？
【发布时间】：2011-04-16 21:07:12
【问题描述】：

我在页面上显示了一些链接。我想根据页面上的其他事件启用/禁用它们。有没有办法用 jQuery 做到这一点？

【问题讨论】：

你用的是html5吗？还是 xhtml？
@robertpitt 为什么这很重要？
因为如果您使用 html5，那么您可以使用 data-* 将数据存储为字符串，因此您可以将 href 存储在 data-href 中并将当前的替换为 #，然后创建一个插件来切换这个，比如$('.disabled').DisableClick();你可以用preventDefault来做，但我只是想解释一下html5的方法。

标签： jquery hyperlink

【解决方案1】：

$('selector_for_links_to_disable').bind('click', function(e){
        e.preventDefault();
})

以及启用：

$('selector_for_links_to_enable').unbind('click')

【讨论】：

在仍然是绑定功能的同时尝试解除绑定是行不通的。然后你必须使用“return true;”。

【解决方案2】：

你可以这样做：

$('.links').click(function(e){
  if( [some conditions] ){
    e.preventDefault();
  }
});

一定要表明它们不再以某种方式工作，否则你的用户会感到困惑，哈哈。

【讨论】：

【解决方案3】：

这取决于您所说的“禁用”。

这会让他们什么都不做：

$("A").click(function() { return false; });

【讨论】：

我认为 OP 意味着将它们从链接更改为文本，因此它们不会显示为链接。否则当场！
不建议返回 false。请改用 e.preventDefault()。

【解决方案4】：

你可以这样做：

<script>
    $(document).ready(function() {
        $('input#disableall').live('click', function(){
            $('a').attr( 'class', 'disabled' );
            alert('All links are disabled.');
        });


        $('input#enableall').live('click', function(){
            $('a').attr( 'class', 'enabled' );
            alert('All links are enabled.');
        });

        $('a.disabled').live('click', function(event){
            event.preventDefault();
        });
    });
</script>

<a href='http://www.google.com'>Google<a/>
<a href='http://www.yahoo.com'>Yahoo<a/>
<a href='http://www.hotmail.com'>Hotmail<a/>

<input type='button' id='disableall' value='Disable Links' />
<input type='button' id='enableall'  value='Enable Links' />

【讨论】：

【解决方案5】：

$(document).delegate('.links', 'click', function () {
  if ([your condition is true]) {
    return false;
  }
})

委托比处理程序更好，因为您可以在加载 dom 之前调用它们

【讨论】：

【解决方案6】：

当我通过 jquery 为按钮提供功能时，我喜欢这样做：

indice = '';

$('myLink').live('click',function() {
    if (indice !== 'value1'){

        // your code
    }

    indice = 'value1';
    return indice;

});

这样，您只需在第一次按下 de 按钮时即可获得该功能。现在你只需要设置与 value1 不同的索引，你的链接就可以再次工作了

【讨论】：