本文将介绍如何使用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)已启用,即可点击。
$(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)再次启用,即可点击。