使用 JQuery 禁用链接答案

【问题标题】：Disabling links with JQuery使用 JQuery 禁用链接
【发布时间】：2010-10-09 19:38:50
【问题描述】：

我有以下代码，它的功能类似于注释链接在 Stackoverflow 上的工作方式...单击时会触发 ActionResult 并填充 div

   $(function() {
        $("a[id ^='doneLink-']").live('click', function(event) {
            match = this.id.match(/doneLink-(\d+)/);
            container = $("div#doneContainer-" + match[1])
            container.toggle();

            if (container.is(":visible")) {
                container.load($(this).attr("href"));
            } else {
                container.html("Loading...");
            }
            event.preventDefault();
        });
    });

我希望能够做一件事，将他们点击的链接文本更改为“隐藏”之类的内容，并禁用此链接所在的小菜单中的其他链接。

编辑： 这个函数的源码如下所示

<div id="dc_lifelistmenu"style="float:left;padding-bottom:5px;font-size:10pt;width:400px;">
    <a href="/entries/addentry/86">Add Entry</a> | 
    <a href="/goals/adddaimoku/86" id="daimokuLink-2">Log Daimoku</a> | 
    <a href="/goals/done/86" id="doneLink-2">Mark Completed</a> |
    <a href="/goals/remove/86">Remove</a>
</div><br />
<div id='daimokuContainer-2' style="display:none;">  Loading...</div>
<div id='doneContainer-2' style="display:none;">  Loading...</div>

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

如果您想删除链接而不是禁用它：

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

注意事项：

您也可以使用 function(k,v) 来获取迭代器和元素，而无需使用 'this'

如果您使用默认命名空间，请随意将 jQuery 替换为 $

var $t = jQuery(this) 是一个缓存函数，它引用元素并帮助清理代码

在实际上是 jQuery 项的变量前面加上 $ 是一种很好的做法，以帮助它们在代码中直观地分开。它还可以帮助您认识到您可以在它们上调用方法。

【讨论】：

【解决方案2】：

要修改函数内的链接文本，只需使用：

this.text('New Text!');

要禁用其他文本，我们必须查看页面的来源。我不确定您所说的“其他链接”是什么意思...

更新：根据您的编辑，我猜您想要什么：

$(function() {
        $("a[id ^='doneLink-']").live('click', function(event) {
            match = this.id.match(/doneLink-(\d+)/);
            container = $("div#doneContainer-" + match[1])
            container.toggle();

            if (container.is(":visible")) {
                container.load($(this).attr("href"));
            } else {
                container.html("Loading...");
            }
            event.preventDefault();
            // added
            this.text('Hide');
            // disable others manually, repeat and adjust for each link
            $("#daimokuLink-" + match[1]).toggle();
            // or in one shot, all but the one I clicked
            $("#dc_lifelistmenu:not(#doneContainer-" + match[1] + ")").toggle(); 
        });
    });

更新 2：看到您的评论。要禁用链接而不是隐藏它，然后通过覆盖它来禁用onclick，而不是使用toggle()。

$("#daimokuLink-" + match[1]).click(function() { return false; });

【讨论】：

是的，现在可以了，禁用不隐藏其他链接...只是希望它们不能被点击。

【解决方案3】：

有几种方法可以解决这个问题，可能最简单的方法就是执行以下操作： $('a').filter('not:#doneLink').hide(); 隐藏所有不是您在上面指定的链接。

查看此页面了解有关 jQuery 选择器的更多信息：

http://docs.jquery.com/Selectors

【讨论】：

【解决方案4】：

最简单的禁用anchor的方法是使用disabled-attribute，但问题是给定的属性只有IE支持。例如，它在 FireFox 中不起作用。如果您希望您的代码在不同的浏览器中工作，您可以尝试将 href 和 onclick 属性的值保存到其他自定义属性中，然后设置 href="#" 和 onclick="return false;"。启用后，您应该恢复保存的 href 和 onclick 值。对于视觉效果，您可以使用应用特殊的 css 类。我在我的博客中描述了这种方法 - Disable hyperlink

【讨论】：