How do I disable an tag link for a certain child of an element?

Question

Let's say I have a container, which leads to the other page when I click it. However, I want some elements inside this container to be disabled, so when I click on them the link won't work. How do I do that?

For example, here I want to disable the red side of the container.

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

<a href="#">
  <div class="container">
    <div class="block-1">Active</div>
    <div class="block-2">Disabled</div>
  </div>
</a>

score 2 · Answer 1 · answered May 09 '20 at 03:59

Everything you put in <a> tag will be clickable, because "click" event is triggered actually on parent (<a> tag) and not on what's inside it.

You need to separate this - simply make one div a link and another not.

a {
  text-decoration: none;
  color: white;
}

.container {
  display: flex;
  width: 400px;
  height: 100px;
  background-color: #ddd;
  box-sizing: border-box;
  padding: 5px;
}

.block-1 {
  width: 50%;
  height: 100%;
  background-color: #3e3e3e;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

.block-2 {
  width: 50%;
  height: 100%;
  background-color: red;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
}

<div class="container">
   <a href="#" class="block-1">Active</a>
   <div class="block-2">Disabled</div>
</div>

Thank you for the answer, although It's not very suitable if there is hundreds of these blocks. I thought maybe there is a more elegant way to just disable some of them — Neia, May 09 '20 at 05:09

score -1 · Answer 2 · answered May 09 '20 at 04:47

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Disable Link using CSS</title> 
    <style type="text/css"> 
        .not-active { 
            pointer-events: none; 
            cursor: default; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3>A Computer Science Portal for Geeks</h3> 
        <b>Disabled link:</b> To visit us  
          <a href="www.geeksforgeeks.org"
             class="not-active">Click Here</a> 
        <br> 
        <br> 
        <b>Enabled link:</b> To use our ide  
          <a href= 
             "https://ide.geeksforgeeks.org/tryit.php"> 
            Click Here</a> 
    </center> 
</body> 
  
</html>

xdhmoore · Accepted Answer · 2020-05-09T21:54:35.463

One option would be to add a click handler. Like this post talks about, you can tell the browser to follow or not to follow the link by calling e.preventDefault().

In the code below, change disabled and you turn on/off the link.

I should add, though, that while I am not an accessibility expert, this is not very "semantic" and I'm guessing probably doesn't work well with screen readers... Maybe something like aria-disabled could be used to fix that, but I'm not familiar enough with it to say.

var link = document.querySelector('a');
var disabled = true;
link.addEventListener('click', (e) => {
  if (disabled) {
    console.log('disabled');
    e.preventDefault();
  }
});

<a href="https://google.com">My link</a>

How do I disable an tag link for a certain child of an element?

3 Answers3