How to disable and re-enable an link with Javascript?

Question

can someone explain me how i can disable an link(only disable because i must reenable the link) i have tryed to use this document.getElementById("aadd").href = "Detail.aspx?using=add"; but when i load the list elements dynamical i cant do it so. because that i ask you how i could disable an link so i cant use it and reenable it? enter image description here

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>

Side note: I can see you have an `input` within an `a`, which is invalid. — emerson.marini, Jan 06 '15 at 14:09
I didn't say it wouldn't work. I said it is invalid markup. What's the point of having two clickable elements nested? You click one, you clicked both. — emerson.marini, Jan 06 '15 at 14:12
You are disabling the input correctly but an `` tag doesn't have a disabled property you could prevent the default action of the `` tag — brso05, Jan 06 '15 at 14:13
i have ask ho i could disable the link because when i click on it it works but i need it so that it dont work and after i must reenable it — Florian Hofmeister, Jan 06 '15 at 14:13
@FlorianHofmeister you should probably just get rid of the `` tag altogether and just use the `` — brso05, Jan 06 '15 at 14:15
what bros05 said is correct. you cannot disable a hyperlink by setting disabled=true. read this. http://stackoverflow.com/questions/10276133/how-to-disable-html-links. the problem is not about invalid markup. — naveen, Jan 06 '15 at 14:16
the proplem is that iam using the x.ID and this in couldnt bring to javascript because the get tags — Florian Hofmeister, Jan 06 '15 at 14:18

score 2 · Accepted Answer · edited Apr 17 '18 at 19:41

To disable all the links on a page you can use this code:

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

And to re-enable them:

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

If you only want to disable the links inside a specific element, replace document.body with the appropriate element.

How to disable and re-enable an link with Javascript?

1 Answers1