禁用链接客户端答案

【问题标题】：Disabling a link client-side禁用链接客户端
【发布时间】：2019-03-21 07:12:54
【问题描述】：

我有一个按钮，点击时会隐藏整个页面中的所有链接。

<input type="button" class="switch" value="switch" isValue="0" />

脚本是：

 <script>
    $(document).on('click', '.switch', function () {
        var v = $(".switch").attr("isValue");
        if (v == 1) {
            $(".switch").attr("isValue", "0");
            $(".dim").show();
        }
        else {
            $(".switch").attr("isValue", "1");
            $(".dim").hide();
        }
    });
</script>

问题：

我需要一个开关来隐藏我的所有链接
我需要让我的链接看起来像是被禁用而不是隐藏。

我需要什么：

如何更换按钮使其成为开关？
因为每当我点击按钮时，它会隐藏我页面中的所有链接，对吧？我可以只使用 css，所以它看起来只是禁用而不是隐藏，因为禁用不会在链接上工作。

我不希望我的链接被隐藏而只是被禁用。

【问题讨论】：

“让它成为一个开关”是什么意思？没有这样的元素类型。
哦好的，第二个问题呢？
在 CSS 中使用 pointer-events: none; 以防止点击它。

标签： javascript html asp.net-ajax

【解决方案1】：

我不确定你所说的开关是什么意思。也许你可以使用单选按钮？

要回答您的第二个问题，您可以使用pointer-events CSS 样式使链接不可点击。

.dim.disabled {
    pointer-events: none;
}

那么 JS 将是：

$(document).on('click', '.switch', function () {
    var v = $(".switch").attr("isValue");
    if (v == 1) {
        $(".switch").attr("isValue", "0");
        $(".dim").removeClass("disabled");
    }
    else {
        $(".switch").attr("isValue", "1");
        $(".dim").addClass("disabled");
    }
});

您也不应该创建像isValue 这样的自定义属性。如果您需要在元素中存储自定义数据，请使用.data()。所以$(".switch").attr("isValue", "1")变成$(".switch").data("isValue", 1);

【讨论】：

你的意思是看起来像[ ON | OFF ]？有些库会呈现这样的单选按钮。

【解决方案2】：

超链接没有禁用属性。如果您不想链接某些内容，那么当您想再次激活时，您需要删除其 href 或将 href 替换为 data-href 属性，然后将其替换为 href 属性。

【讨论】：