Disabling href link in javascript

Question

I would like to disable a href link in javascript but only for a particular duration.

<tr><td width= 40></td><td id="idHardwareInfo_5" class="sub_newmenu_item" ><a href="javascript:fnMenuClickedCustPop()"><% _("Discovery"); %></a></td></tr>

function fnMenuClickedCustPop()
{
        fnMenuClicked('XYZ.asp', 'id_5');
        alert("This operation may take a few minutes to complete.Please wait...");
}

This XYZ.asp file includes a .inc file which has the js code its functionality includes executing a loop 18 times. I would like to disable the href link until that loop completes entirely from 1-18 so that in between the user can not click the link.What could be the best way to do this? PS:i am a complete Newbie to javascript. Thanks :-)

Answer 1

Add the following css class to your link in your function when loop starts and remove it at the end of loop

.not-active {
   pointer-events: none;
   cursor: default;
}

<a id="link" href="javascript:fnMenuClickedCustPop()"><% _("Discovery"); %></a>

function fnMenuClickedCustPop()
{
        alert("This operation may...");
        $("#link").addClass('not-active') //when loop is going to start
        fnMenuClicked('XYZ.asp', 'id_5');
        $("#link").removeClass('not-active') //once loop finishes, you might need to do this inside XYZ.asp where loop runs not here. This is just an indicator

}

Answer 2

You can add an event listener to the element to prevent the default behavior upon click, then remove that listen when you want to re-enable the href. let's say you don't use jQuery or any plugin, ie vanilla JS, say

you have

<a id="disableForDuration" href="xxxx">link</a>

In JS, you can do

var elem = document.getElementById("disableForDuartion");
var handler = function (evt) {
    evt.prevantDefault();
}
elem.addEventListener("click", handler);

// Do whatever stuff....

// when you want to enable the link
elem.removeEventListener("click", handler);