禁用 jQuery 中的链接元素，然后稍后启用它[重复]答案

【问题标题】：Disable a linked element in jQuery and then Enable it later on [duplicate]禁用 jQuery 中的链接元素，然后稍后启用它[重复]
【发布时间】：2014-02-03 02:58:13
【问题描述】：

我在网页上有以下链接元素。如何使用 jQuery 禁用它？似乎设置 disabled 属性不会禁用它。

<A style="COLOR: black" href="javascript:__doPostBack('GridViewWithLinkqToSQL','Page$20')">20</A>

编辑 1：答案（带有功能齐全的示例页面代码）

最后，我能够启用/禁用链接。要启用只需附加一个单击处理程序，其中禁用事件的默认操作，并启用删除相同的单击处理程序。在我下面的代码中，Link1 将打开 yahoo 主页，而 Link2 将在启用这两个链接时显示 javascript 错误。

带有必要 javascript/jQuery 的 HTML 页面代码如下。使用这种方法，您可以启用/禁用 div 中的多个超链接（如在 Grid 控件中）。这是一个视频链接，该视频将展示禁用和启用链接非常有用的情况：Disable all hyperlinks within a GridView during AJAX Postback。您会在视频中注意到，当用户点击列标题链接或页码链接时，它什么也不做，这正是我们想要的，当发生长时间的 AJAX 回发并且用户开始不耐烦地点击链接时。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Enable/Disable Links</title>
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="div1">
        <a href="https://www.yahoo.com">Link1</a>
        <a style="COLOR: black" href="javascript:__doPostBack('GridViewWithLinkqToSQL','Page$20')">Link2</a>
    </div>
    <input id="Button1" type="button" value="Disable Links" onclick="ToggleLinks(true);" />
    <input id="Button2" type="button" value="Enable Links" onclick="ToggleLinks(false);" />
    <script type="text/javascript">
        function ToggleLinks(disabled) {
            var div1 = $('#div1');

           // div1.find("*").prop("disabled", disabled);
            if (disabled) {
                div1.find("a").each(function (i, element) {
                    $(this).click(function (e) {
                        e.preventDefault();
                        return false;
                    });
                });
            }
            else {
                 div1.find("a").each(function (i, e) {
                    $(this).unbind("click");
                });
            }
        }
    </script>
 </body>
</html>

【问题讨论】：

禁用属性适用于输入元素。
谷歌搜索 jquery disable link 给了我几十个结果。
你检查过these questions吗？

标签： jquery hyperlink

【解决方案1】：

$('#your_link').click(function(e) {
    e.preventDefault();
});

这是工作小提琴：http://jsfiddle.net/g5Mkj/

【讨论】：

【解决方案2】：

链接上没有可以设置为禁用它的属性。您可以做的是删除它的href 属性。

$('#yourAnchorId').removeAttr('href');

或者你可以在它上面设置一个点击事件来取消事件传播：

$('#yourAnchorId').click(function(event) {
     event.preventDefault();
});

【讨论】：

请注意，删除 HREF 属性与 preventDefault() 相同，但通常会删除锚点上的“光标：指针”。如果您需要记住 HREF 属性，只需“e.preventDefault()”可能会更简单！