Disable All Links Within DIV

This JavaScript function disables all links within the specified DIV by setting the link object to disabled as well as removing the onclick and href attributes. This is a useful JavaScript function for form submissions since it prevents the user from clicking another link while an action is pending.

function DisableAllDIVLinks(DivId) {
  var div = document.getElementById(DivId);
  var anchorList = div.getElementsByTagName('a');

  for(var i = 0; i < anchorList.length; i++) {
    anchorList[i].disabled = true;
    anchorList[i].onclick = '';
    anchorList[i].removeAttribute('href');
  }
}

The following is a modified version that disables all links within a specified DIV, but it retains a backup of the links so that they can be re-enabled with the EnableAllDIVLinks function.

function DisableAllDIVLinks(DivId) {
  var div = document.getElementById(DivId);
  var anchorList = div.getElementsByTagName('a');

  for(var i = 0; i < anchorList.length; i++) {
    anchorList[i].disabled = true;
    anchorList[i].setAttribute('backup_href', anchorList[i].getAttribute("href"));
    anchorList[i].removeAttribute('href');
  }
}

function EnableAllDIVLinks(DivId) {
  var div = document.getElementById(DivId);
  var anchorList = div.getElementsByTagName('a');

  for(var i = 0; i < anchorList.length; i++) {
    anchorList[i].disabled = false;
    anchorList[i].setAttribute('href', anchorList[i].getAttribute("backup_href"));
    anchorList[i].removeAttribute('backup_href');
  }
}

Leave a Comment