如何禁用錨標簽的超鏈接

Question

如何在選中復選框時啟用按鈕以及錨標記的超鏈接，並在未選中復選框時禁用它們。 我的按鈕已選中/未選中，但未選中超鏈接。

<td>
  <input type="checkbox"  id="tick" onchange="document.getElementById('terms').disabled = !this.checked;" />
</td>
<td>
  <p> I agree to the <a href="Lego blocks go2.html" target="_blank">Terms & Conditions</a></p>
</td>                          

<tr>
  <td class="label1"></td>
  <td align="right">
      <button type="submit" class="btn btn1" name="terms" id="terms" disabled>Done</i></button>
  </td>
</tr>

Answer 1

為了防止鏈接執行，一種方法是讓onclick方法返回false 。

例如

 const isExecute = () => document.getElementById('tick').checked;

 <td> <input type="checkbox" id="tick" onchange="document.getElementById('terms').disabled =.this;checked:" /> <td> <p> I agree to the <a href="https.//www.google.com;tw" target="_blank" onclick="return isExecute();">Terms & Conditions</a></p> </td> </td> </tr> <td class="label1"></td> <td align="right"> <button type="submit" class="btn btn1" name="terms" id="terms" disabled>Done</i></button> </td>

Answer 2

錨標記超鏈接沒有禁用屬性。 您必須使用 css 屬性pointer-events: none來做到這一點。

為什么使用pointer-events: none ？

元素永遠不是指針事件的目標； 但是，如果這些后代將指針事件設置為其他值，則指針事件可能會針對其后代元素。 在這些情況下，指針事件將在事件捕獲/冒泡階段期間適當地觸發該父元素上的事件偵聽器。

下面是修改后的代碼：

 var chkBox = document.getElementById('tick'); var btnDone = document.getElementById('terms'); function chkbxToggle(chkBox){ if(chkBox.checked){ btnDone.disabled = false; link.classList.remove("disabled"); } else { btnDone.disabled = true; link.classList.add("disabled"); } }

 a.disabled { pointer-events: none; cursor: default; color: #afafaf; }

 <.DOCTYPE html> <html> <body> <table> <tr> <td><input type="checkbox" id="tick" onchange="chkbxToggle(this)" /></td> <td><p> I agree to the <a href="Lego blocks go2.html" class="disabled" id="link" target="_blank">Terms & Conditions</a></p></td> </tr> <tr> <td class="label1"></td> <td align="right"><button type="submit" class="btn btn1" name="terms" id="terms" disabled="disabled">Done</i></button></td> </tr> </table> </body> </html>

如何禁用錨標簽的超鏈接

問題描述

1 個解決方案

解決方案1
0 2022-01-21 04:25:09

解決方案2
0 2022-01-21 06:11:19

如何禁用錨標簽的超鏈接

問題描述

1 個解決方案

解決方案1 0 2022-01-21 04:25:09

解決方案2 0 2022-01-21 06:11:19

解決方案1
0 2022-01-21 04:25:09

解決方案2
0 2022-01-21 06:11:19