如何使用 Javascript 禁用和重新启用链接？答案

【问题标题】：How to disable and re-enable an link with Javascript?如何使用 Javascript 禁用和重新启用链接？
【发布时间】：2015-03-04 05:18:00
【问题描述】：

谁能解释我如何禁用链接（仅禁用因为我必须重新启用链接）我曾尝试使用此document.getElementById("aadd").href = "Detail.aspx?using=add"; 但是当我动态加载列表元素时我不能这样做。因为我问你我怎样才能禁用一个链接，所以我不能使用它并重新启用它？

function changebuttonstate(thisbtn) {

        if (document.getElementById("add").disabled == true) {
            document.getElementById("add").disabled = false;
            document.getElementById("aadd").href = "Detail.aspx?using=add";
            var elems = document.getElementsByClassName("disabledbutton");
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = false;
            }

        } else {
            document.getElementById("add").disabled = true;
            document.getElementById("aadd").href = "#";
            var elems = document.getElementsByClassName("disabledbutton");
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = true;
            }
            thisbtn.disabled = false;
        }

        if (document.getElementById("refresh").disabled == true) {
            document.getElementById("refresh").disabled = false;
            document.getElementById("arefresh").href = "";
            var elems = document.getElementsByClassName("disabledbutton");
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = false;
            }
        } else {
            document.getElementById("refresh").disabled = true;
            document.getElementById("arefresh").href = "#";
            var elems = document.getElementsByClassName("disabledbutton");
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = true;
            }
            thisbtn.disabled = false;

        }
    }

<a href="Detail.aspx?using=edit&id={{x.ID}}"><input type="button" id="Edit" value="Edit" class="btn btn-primary disabledbutton"/></a>
                <button type="button" class="btn btn-danger disabledbutton" data-toggle="collapse" data-target="#demo{{x.ID}}" onclick="changebuttonstate(this)">Delete</button>
                <div id="demo{{x.ID}}" class="collapse disabledbutton">
                  <div class="well">
                    <p>Are you sure?</p>
                      <a href="Delete.aspx?id={{x.ID}}"><input type="button" id="Button1" class="btn btn-danger"  value="Delete"/></a>
                  </div>
                </div>

<a href="Detail.aspx?using=add" id="aadd"><input type="button" id="add" value="Add"  class="btn btn-success"/></a>
        <a href="listview.aspx" id="arefresh"><input type="button" id="refresh" value="Refresh" class="btn btn-primary"/></a>

【问题讨论】：

旁注：我可以看到您在a 中有一个input，这是无效的。
我没有说它行不通。我说这是无效标记。嵌套两个可点击元素有什么意义？你点击一个，你点击了两个。
你的代码有什么问题是它不起作用吗？
您正确禁用了输入，但<a> 标签没有禁用属性，您可以阻止<a> 标签的默认操作
@FlorianHofmeister 您可能应该完全摆脱<a> 标签，而只使用<input>

标签： javascript html asp.net twitter-bootstrap

【解决方案1】：

要禁用页面上的所有链接，您可以使用以下代码：

document.body.addEventListener("click", function stopLinks(e){
    if (this.nodeName==="A"){
        e.preventDefault();
        return false;
    }
})

并重新启用它们：

document.body.removeEventListener("click", stopLinks);

如果您只想禁用特定元素内的链接，请将document.body 替换为适当的元素。

【讨论】：