如何在使用javascript单击div中的链接时禁用div中的所有其他链接[重复]

Posted 2023-03-25

【中文标题】如何在使用javascript单击div中的链接时禁用div中的所有其他链接[重复]

【英文标题】：How to disable all other links in a div on click of a link in div using javascript [duplicate]

【发布时间】：2021-12-28 04:07:24

【问题描述】：

我是 javascript 新手。我希望在单击 div 中的链接时禁用 div 中的所有其他链接。 如果我单击该 div 中的任何链接，该 div 中的其他链接应禁用且不可单击。

此代码不会在单击任何按钮时使链接无法单击。如果单击任何链接，则该 div 中的其他链接应禁用且不可单击。例如，如果点击接受链接，则接受、拒绝和还价链接应该是不可点击和禁用的。

输出

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>

【问题讨论】：

查看此question，特别是此answer，了解如何执行此操作。

除非您使用 localStorage 或其他东西，否则您无法禁用链接并点击链接

【参考方案1】：

您没有删除href，而是设置了一个在css中捕获指针事件的类。

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

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

CSS：

.disabled 
  pointer-events: none;

请注意，href 和 onClick 不能一起使用。您应该将特定函数传递给处理该功能并随后禁用按钮的每个链接。

【讨论】：

不工作，按钮未禁用，此代码执行后

什么不起作用？当您单击链接时，该解决方案会阻止执行任何代码，根据定义，该链接是“禁用的”。如果您希望链接看起来不同，当然您必须更改样式。如何做到这一点也在已链接的answer 中进行了说明。请记住，您不能同时使用href 和onclick。

那么href可以使用哪个函数呢？

无。您可以使用 href 属性进行 url 重定向或 onClick 执行逻辑步骤。在您的情况下，您需要使用onClick。在您传递的函数中，您首先执行连接到按钮的逻辑，然后调用该函数以禁用其他按钮。

接受 .这是正确的调用方式吗？