How to disable specific href link through buttonclick event

Question

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>

`getElementById()` will return the element ``, which does not have a href attribute. The simplest way to fix your issue would be to set the link href value to nothing, or `#` — Reinstate Monica Cellio, Mar 31 '19 at 19:00

Miroslav Glamuzina · Answer 1 · 2019-04-01T04:24:52.100

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,

Do not keep obsolete elements in the code. Correct and let OP know that. — Asons, Apr 01 '19 at 04:12
@musa I have updated my answer to remove the `` element as it is obsolete and may not work in modern browsers. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font — Miroslav Glamuzina, Apr 01 '19 at 04:25
@LGSon, thank you for notifying me, I completely overlooked that — Miroslav Glamuzina, Apr 01 '19 at 04:26

score 0 · Answer 2 · answered Mar 31 '19 at 19:04

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 · 2019-04-01T03:57:58.073

0

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','#');
}

edited Apr 01 '19 at 03:57

answered Mar 31 '19 at 19:07

Shoyeb Sheikh

2,659
2
10
19

score 0 · Answer 4 · answered Mar 31 '19 at 19:27

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

4 Answers4