html锚链接设为无效,使用jQuery使HTML锚链接（HyperLink）不可点击或禁用

本文将介绍如何使用jQuery使HTML锚链接(HyperLink)不可点击或禁用。

使HTML锚链接(HyperLink)不可点击或禁用

HTML禁用(disabled)属性不适用于HTML锚链接(HyperLink)，它们仍然是可点击的。

使用jQuery使HTML锚链接(HyperLink)不可点击或禁用

以下HTML标记由三个HTML锚链接(HyperLink)和一个Button组成。单击Button时，将执行jQuery Click事件处理程序。

在此Click事件处理程序中，将检查单击的Button的值，如果Button的值为Disable，则禁用HTML Anchor Links(HyperLink)，即不可单击，如果Button的值为Enable，则为HTML Anchor Links( HyperLink)已启用，即可点击。

webkaka.com

---

$(function () {

$("#btnEnableDisable").click(function () {

if ($(this).val() == "Disable") {            $(this).val("Enable");

$("a").each(function () {

$(this).attr("rel", $(this).attr("href"));

$(this).attr("href", "javascript:;");

});

} else {

$(this).val("Disable");

$("a").each(function () {

$(this).attr("href", $(this).attr("rel"));

$(this).removeAttr("rel");

});

}    });

});

效果如图：

使HTML锚链接(HyperLink)不可点击或禁用

禁用HTML锚链接(HyperLink)

为了禁用HTML Anchor Link(HyperLink)，将其HREF属性的值复制到REL属性，并将HREF属性的值设置为空JavaScript函数。

$("a").each(function () {

$(this).attr("rel", $(this).attr("href"));

$(this).attr("href", "javascript:;");

});

这使得HTML锚链接(HyperLink)被禁用，即不可点击。

启用HTML锚链接(HyperLink)

为了启用HTML Anchor Link(HyperLink)，将其REL属性的值复制回HREF属性，并删除REL属性。

$("a").each(function () {

$(this).attr("href", $(this).attr("rel"));

$(this).removeAttr("rel");

});

这使得HTML锚链接(HyperLink)再次启用，即可点击。