How to enable and disable links successively?

Question

I have five links, and initially only the first link is enabled. When this first link is clicked, I want it to auto-disable and enable the next, that is, the second link, and when the second is clicked, to auto-disable and enable the next, and so on.

However, the links that have already been clicked I want to remain disabled until you reach the last link. Below follows a start of what I need:

  window.onclick = function(){
        document.getElementById('link').onclick = function(){return false};
    }
    
    function desabilitar_link(){
        document.getElementById('link').innerHTML = "Link desabilitado";
        document.getElementById('link').style.color = "grey";                 
    }

<div>
    <ul>
        <li><a href="http://www.google.com/" target='_blank' id="link" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com/" target='_blank' id="link2" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com/" target='_blank' id="link3" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com/" target='_blank' id="link4" onmouseup="desabilitar_link()"> Link habilitado </a></li>
        <li><a href="http://www.google.com/" target='_blank' id="link5" onmouseup="desabilitar_link()"> Link habilitado </a></li>
    </ul>
<div>

Answer 1

I managed to find a solution via jQuery, see if it fits you in this fiddle: https://jsfiddle.net/gf60xdgt/4/

Note only that I had to put the id of the first link to "link1" so I didn’t have to keep doing an unnecessary code check in the middle.

//para tudo que o id comece com "link"
$('[id^=link]').click(function() {
  //verifica se tem a classe disabled
  if (!$(this).hasClass('disabled')) {
    //pegamos o id atual
    var id = $(this).attr('id');
    //damos split para pegar o numero
    var linknumber = id.split('link');
    //somamos o número + 1
    var nextLink = '#link'.concat(parseInt(linknumber[1]) + 1);

    //removemos a classe do próximo
    $(nextLink).removeClass('disabled');
    //adicionamos nele
    $(this).addClass('disabled');
  }
  //se tiver não faz nada
  else {
    return false;
  }
});

/* serve só para estilizar o link */

.disabled {
  text-decoration: none;
  color: gray;
  cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li><a href="http://www.google.com/" target='_blank' class='' id="link1"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com/" target='_blank' class='disabled' id="link2"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com/" target='_blank' class='disabled' id="link3"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com/" target='_blank' class='disabled' id="link4"> Link habilitado </a>
    </li>
    <li><a href="http://www.google.com/" target='_blank' class='disabled' id="link5"> Link habilitado </a>
    </li>
  </ul>
  <div>

Answer 2

Another way to resolve it is to disable the link through the property pointer-events of CSS with value none. About this property, in MDN it is explained that:

The CSS property pointer-events allows authors to control under any circumstances (if any) a particular graphic element which may be the target (event.target) of the mouse event. When this property is not specified, the same characteristics of the value visiblePainted is applied in SVG content.

And about the value none, the same source quotes:

The element is never the target (event.target) of mouse events; however, mouse events can direct their descending elements if those descendants have some other value set in the pointer-events. In these circumstances, mouse events will trigger listening events on your parent elements as appropriate on your path to/from the descendant, during the capture/pimple event phases (event.bubbles).

The only point where the use of this property can be considered a problem, depending on how you are developing the site, is that, according to Can I use it does not work on links rendered by Internet Explorer 11, except when these have display defined as block or inline-block.

To resolve what was asked, the snippet below defines all links with pointer-events: none, preventing any mouse event from being triggered. And with Javascript, assign a class active active link, class you define pointer-events: auto and makes the link "clickable".

(function() {
  var links = document.querySelectorAll('nav a'),
      index = 0;

  /**
   * Remove a classe 'active' do link atual e move o índice para
   * o próximo elemento na lista de 'links'. Ao mover o índice, o
   * próximo elemento recebe a classe 'active'.
   *
   * Se o valor do índice chegar ao número total de links, ele será
   * zerado, voltando ao primeiro link da lista.
   */
  function handler(){
    links[index].classList.remove('active');

    index++;
    if (index === links.length) index = 0;

    links[index].classList.add('active');
  }
  
  
  for (var i = 0; i < links.length; i++)
    links[i].addEventListener('click', handler, false);

})();

nav a {
  pointer-events: none;
  display: inline-block; /* bug do IE11 */
  color: #ccc
}

nav a.active {
  pointer-events: auto;
  color: blue
}

<nav>
  <a class='active' href='#'>Link A</a>
  <a href='#'>Link B</a>
  <a href='#'>Link C</a>
  <a href='#'>Link D</a>
  <a href='#'>Link E</a>
  <a href='#'>Link F</a>
  <a href='#'>Link G</a>
</nav>