Disable Link in jQuery

Question

How do I disable a link in jQuery? Previously I was changing the anchor's href attribute but realized this would not be the best way to stop the user being taken to a new page. I added disabled true to the attribute instead but this isn't working. The click still needs to work - I just don't want the link in the anchor to activate.

var acc = document.getElementsByClassName("dropdown-nav");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active-hit");
    this.find('a').attr('disabled', true);
    //this.find("a").attr("href", "#");
  });
}

<ul>
  <li class="dropdown-nav">
    <a href="/about">About
      <span class="nav-desc">Our company</span>
    </a>
    <div class="hide-border"></div>
    <ul class="second-tier">
      <div class="hide-corner"></div>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our People</a></li>
      <li><a href="#">Work with us</a></li>
      <li><a href="#">High Value Manufacturing</a></li>
    </ul>
  </li>
</ul>

links don't have a disabled attribute, question has been asked a bunch of times before. — epascarello
– epascarello, Commented Feb 8, 2018 at 13:57
What do you mean by "The click still needs to work - I just don't want the link in the anchor to activate."? — void
– void, Commented Feb 8, 2018 at 13:58
I need to retain the link for desktop view. I'm disabling for an accordion on mobile. — Dan Lee
– Dan Lee, Commented Feb 8, 2018 at 13:58

score 3 · Accepted Answer · 2018-02-08 14:38:35Z

3

You can add an event (e) parameter to the click function and the use e.preventDefault(); to stop the link from being followed.

var acc = document.getElementsByClassName("dropdown-nav");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function(e) {
    this.classList.toggle("active-hit");
    e.preventDefault();
  });
}

<ul>
  <li class="dropdown-nav">
    <a href="/about">About
      <span class="nav-desc">Our company</span>
    </a>
    <div class="hide-border"></div>
    <ul class="second-tier">
      <div class="hide-corner"></div>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our People</a></li>
      <li><a href="#">Work with us</a></li>
      <li><a href="#">High Value Manufacturing</a></li>
    </ul>
  </li>
</ul>

Updated jQuery Solution following on from comments:

var $dropdown = $('.dropdown-nav > a');

$dropdown.on('click', function(e){
  $(this).parent().toggleClass('active-hit'); 
  e.preventDefault(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown-nav">
    <a href="/about">About
      <span class="nav-desc">Our company</span>
    </a>
    <div class="hide-border"></div>
    <ul class="second-tier">
      <div class="hide-corner"></div>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our People</a></li>
      <li><a href="#">Work with us</a></li>
      <li><a href="#">High Value Manufacturing</a></li>
    </ul>
  </li>
</ul>

edited Feb 8, 2018 at 14:38

answered Feb 8, 2018 at 13:59

user9019817

Sign up to request clarification or add additional context in comments.

6 Comments

Dan Lee Over a year ago

Changing to a JQuery function like so doesn't seem to work. $dropdown.click(function(e) { $(this).toggleClass('active-hit'); //$(this).find('a').attr('disabled', true); e.preventDefault(); });

Dan Lee Over a year ago

it is the list item .dropdown-nav

Dan Lee Over a year ago

Ok trying this out it doesn't allow me to click on the list item (to open the accordion). Are we able to apply the e.preventDefault() to just the anchor which is a child of the list item?

Dan Lee Over a year ago

That seems to work - the accordion opens. However the links within (.secon-tier) cannot be followed - they are disabled like the child of the drop-down parent.

Dan Lee Over a year ago

Ah yes - so similar to CSS in selecting adjacent element. It's working now.

|

ChrispyChips · Accepted Answer · 2018-02-08 14:37:44Z

0

I like to use the 'on'

  $("a").on('click', function(event) {
    event.preventDefault();
    alert('default link action prevented');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="https://www.google.com" target="_blank">Some link</a>

answered Feb 8, 2018 at 14:37

ChrispyChips

563 bronze badges

Comments

Jordi Flores · Accepted Answer · 2018-02-08 14:39:40Z

0

Just add pointer-events: none; css property to the element you want to not be clicked. It makes it just as not visible to your pointer.

Then just use js to toggle this class as you need.

.noClickAllowed {
  pointer-events: none;
}

<ul>
  <li class="dropdown-nav noClickAllowed">
    <a href="/about">About
      <span class="nav-desc">Our company</span>
    </a>
    <div class="hide-border"></div>
    <ul class="second-tier">
      <div class="hide-corner"></div>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">Our People</a></li>
      <li><a href="#">Work with us</a></li>
      <li><a href="#">High Value Manufacturing</a></li>
    </ul>
  </li>
</ul>

answered Feb 8, 2018 at 14:39

Jordi Flores

2,15012 silver badges17 bronze badges

Collectives™ on Stack Overflow

Disable Link in jQuery

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related