Comment faire pour désactiver tous les autres liens dans un div sur le fait de cliquer sur un lien dans la div en javascript [dupliquer]

0

La question

Je suis nouveau sur le Javascript. Je souhaite désactiver tous les autres liens dans un div sur le fait de cliquer sur un lien dans la div. Si je clique sur un lien dans ce div, les autres liens dans la div doit désactiver et unclickable.

Ce code n'est pas en faisant des liens unclickable cliquer sur un bouton . Si un lien est cliqué, les autres liens dans la div doit désactiver et unclickable. Par exemple, Si l'accepter lien est cliqué, les liens d'accepter, de refuser et de contre-offre des liens devraient être unclickable et désactiver.

Sortie 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>

css disable-link html hyperlink
2021-11-17 06:51:31
1

La meilleure réponse

1

Au lieu de supprimer les hrefvous permet de définir une classe avec capture les événements de pointeur dans le css.

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

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

CSS:

.disabled {
  pointer-events: none;
}

Veuillez noter que href et onClick ne pas travailler ensemble. Vous devez passer à une fonction spécifique de chaque lien, qui gère la fonctionnalité et désactive les boutons par la suite.

2021-11-17 07:06:40

Ne fonctionne pas , le bouton n'est pas désactivé, une fois que ce code s'exécute
Binsha

Ce n'est pas de travail? Cette solution empêche le code ne s'exécute lorsque vous cliquez sur le lien qui est "handicapé" par définition. Si vous voulez le lien pour un look différent, bien sûr, vous avez à changer le style. Comment faire c'est aussi expliqué dans le déjà lié réponse. N'oubliez pas que vous ne pouvez pas utiliser href et onclick ensemble.
HDinger

Donc, fonction qui peut être utilisé avec href?
Binsha

Aucun. Vous utilisez le href attribut d'une url de redirection OU de onClick pour l'exécution des étapes logiques. Dans votre cas, vous devez utiliser onClick. Dans la fonction que vous passez, vous devez d'abord exécuter la logique connecté au bouton et ensuite appeler la fonction pour désactiver les autres boutons.
HDinger

<a href='/truckianAccept/".$lastId."' id= "accepter" class='btn btn-primary' onclick='disableButton();'>Accepter </a> . Est-ce la bonne façon de l'appeler?
Binsha

<a id= "accepter" class='btn btn-primary' onclick='executeStuffAndDisableButton();'>Accepter </a>
HDinger

pourquoi cette fonction 'executeStuffAndDisableButton();'?
Binsha

Parce que vous ne peut pas mettre le href ensemble avec onclick. Au lieu de cela vous avez à faire tout l'intérieur de la fonction vous passer: désactivation des boutons ainsi que la logique réelle
HDinger

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................