How to disable specific href link through buttonclick event

Question

How to disable specific href link through buttonclick event

272 Views Asked by musa At 21 October 2024 at 08:00

I have multiple tables wher each row is defined by an ID and a class. The words in each row are actually href links. I have one button with id testbuttonba. If testbuttonba is clicked, I want the following to occur:

1) href for ID table1 to be disable.

2) href for ID table2 and table3 to still be enabled.

My code below does not work (all links are still enabled after clicking):

HTML

<body>
<button class="btnba" id="testbtnba" onclick="function2()">BA</button>

    /* 1st Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table1">
            <tr>
                <td><a href="showdoc.html"><font size="1"><strong>A. Organisational Content</strong></font></a></td>
           </tr>
    </table>

    /* 2nd Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table2">
            <tr>
                <td><a href="showpdf.html"><font size="1"><strong>B. Basic Requirements</strong></font></a></td>
           </tr>
    </table>

    /* 3rd Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table3">
            <tr>
                <td><a href="showexcel.html"><font size="1"><strong>C. Rules and Regulations</strong></font></a></td>
           </tr>
    </table>

JavaScript

<script>
    /*diasble the first link - not working*/
    function function2() {
        document.getElementById("table1").href = "#";
    }
    return false;
</script>

Original Q&A

There are 4 best solutions below

**Miroslav Glamuzina** · Answer 1

You shouldn't remove the href on the <a/> (at least without storing in some way). You can create a toggle that will determine whether or not Event.preventDefault() will be called when the button is clicked.

This will do the trick:

let linkActive = false;
disableToggle = () => {
  linkActive = !linkActive;
}

document.querySelector('#table1 tr td a').onclick = ev => {
  if (linkActive) {
    ev.preventDefault('sd');
  }
};

.smallFont {
  font-size: 10px;
}

<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table1">
    <tr>
      <td>
        <a href="showdoc.html">
          <span class="smallFont"><strong>A. Organisational Content</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 2nd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table2">
    <tr>
      <td>
        <a href="showpdf.html">
          <span class="smallFont"><strong>B. Basic Requirements</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 3rd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table3">
    <tr>
      <td>
        <a href="showexcel.html">
          <span class="smallFont"><strong>C. Rules and Regulations</strong></span>
        </a>
      </td>
    </tr>
</table>

The reason it does not work in your snippet above is only because your selector doesn't select the <a/> element, doing this will rectify that:

function function2() {
  document.querySelector("#table1 tr td a").setAttribute('href', '#');
}

.smallFont {
  font-size: 10px;
}

<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table1">
    <tr>
      <td>
        <a href="showdoc.html">
          <span class="smallFont"><strong>A. Organisational Content</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 2nd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table2">
    <tr>
      <td>
        <a href="showpdf.html">
          <span class="smallFont"><strong>B. Basic Requirements</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 3rd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table3">
    <tr>
      <td>
        <a href="showexcel.html">
          <span class="smallFont"><strong>C. Rules and Regulations</strong></span>
        </a>
      </td>
    </tr>
</table>

Keep in mind, that there is no way to re-enable the link using the code in this way :o

Update: Replaced the <font/> tags with some CSS. The <font/> element is obsolete. Hope that helps,

**Fito von Zastrow** · Answer 2

Your script is grabbing the wrong element. document.getElementById("table1") returns a tbody element, which does not have an hrefattribute on it.

You need to add an id to the a element, like: <a id="some-id">

Then, use it to grab the link and change the href: document.getElementById("some-id").href = "#";

**Shoyeb Sheikh** · Answer 3

Shoyeb Sheikh On 31 March 2019 at 19:07

You have to find the anchor tag in element with id table1, and disable it like below.

function function2() {
    var a = document.querySelector('#table1 a');
    a.setAttribute('href','#');
}

**Razmik Ghookas** · Answer 4

please change the function 
  function function2() {

            document.getElementById("table1").getElementsByTagName('a')[0].href = "#";
        }

result of this code document.getElementById("table1") is tbody tag and then you should find the tag a in this tag then disable the href . i hope my answer give you an idea .

How to disable specific href link through buttonclick event

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HTML-TBODY

Trending Questions

Popular # Hahtags

Popular Questions