0

I am new to Javascript. I wish to disable all other links in a div on click of a link in div. If I click any link in that div, other links in that div should disable and unclickable.

This code is not making links unclickable on clicking any button . If any link is clicked, the other links in that div should disable and unclickable. For example, If accept link is clicked, the links accept, decline and counter offer links should be unclickable and disable.

Output Output

function disableButton() {
  document.querySelector("#notify-div a").removeAttribute("href");

}
<div id="notify-div">
  user_name has requested a bid price of bid for quantity of qty for mileage mileage_name of truck truck_name.
  <br> <a href='/truckianAccept/".$lastId."' id='accept' class='btn btn-primary' onclick='disableButton();'>Accept </a>
  <a href='/truckianDecline/".$lastId."' id='decline' class='btn btn-primary' onclick='disableButton();'>Decline </a> <a href='/wstCounterOffer/".$lastId."' id='counter' class='btn btn-primary' onclick='disableButton();'>Counter Offer </a>";
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
CodeHunt
  • 83
  • 1
  • 11
  • See this [question](https://stackoverflow.com/questions/10276133/how-to-disable-html-links) and specifically this [answer](https://stackoverflow.com/a/10276157/4218046) to it on how to do this. – Fabian S. Nov 17 '21 at 06:59
  • You cannot disable the link AND follow the link unless you use localStorage or something – mplungjan Nov 17 '21 at 07:13

1 Answers1

1

Instead of removing the href, you set a class with captures the pointer events in css.

function disableButtons() {
  const links = document.querySelectorAll("#notify-div a");

  links.forEach(function(link) {
    link.classList.add('disabled');
  });
}

CSS:

.disabled {
  pointer-events: none;
}

Please note, that href and onClick won't work together. You should pass a specific function to each link that handles the functionality and disables the buttons afterwards.

HDinger
  • 61
  • 4
  • Not working , the button is not disabled, after this code executes – CodeHunt Nov 17 '21 at 07:26
  • What is not working? The solution prevents any code from being executed when you click on the link, which is "disabled" by definition. If you want the link to look different, of course you have to change the styling. How to do that is also explained in the already linked [answer](https://stackoverflow.com/questions/10276133/how-to-disable-html-links/10276157#10276157). Remember that you can't use `href` and `onclick` together. – HDinger Nov 17 '21 at 07:34
  • So which function can be used with href? – CodeHunt Nov 17 '21 at 08:36
  • None. You use either the `href` attribute for a url redirect OR `onClick` for executing logical steps. In your case, you need to use `onClick`. In the function that you pass, you first execute the logic connected to the button and afterwards call the function to disable the other buttons. – HDinger Nov 17 '21 at 08:59
  • Accept . Is it the correct way of calling? – CodeHunt Nov 17 '21 at 09:08
  • Accept – HDinger Nov 19 '21 at 10:36
  • why this function 'executeStuffAndDisableButton();'? – CodeHunt Nov 19 '21 at 10:44
  • Because you **cannot** put the href together with `onclick`. Instead you have to do everything inside the function you pass: disabling the buttons as well as the actual logic – HDinger Nov 19 '21 at 12:18