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>

Improve this question
2
  • See this question and specifically this answer to it on how to do this. Commented Nov 17, 2021 at 6:59
  • You cannot disable the link AND follow the link unless you use localStorage or something Commented Nov 17, 2021 at 7:13

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Not working , the button is not disabled, after this code executes
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. Remember that you can't use href and onclick together.
So which function can be used with href?
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.
<a href='/truckianAccept/".$lastId."' id='accept' class='btn btn-primary' onclick='disableButton();'>Accept </a> . Is it the correct way of calling?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.