how to disable a li tag using JavaScript

Question

I am using the following HTML on my page:

<ul id="tabnav">

        <li id="tab_a" class="tab1"><a href="tab1.htm">Tab a</a></li>
        <li id="tab_b" class="tab2"><a href="tab2.htm">Tab b</a></li>
        <li id="tab_c" class="tab3"><a href="tab3.htm">Tab c</a></li>
    </ul>

What I am trying to do is make it so that you can't click on the 3rd tab using javascript then I want to be able to click on the 3rd tab at a later time.

So I have tried using the following JavaScript in a JavaScript function:

document.getElementById("tab_c").style.enabled = false;

however it didn't seem to work.

I was hoping that it would make it disabled so you can't click on it.

Am I doing something wrong?

Answer 1

//css
.disabled{
    pointer-events:none;
    opacity:0.4;
}
// jqvery
$("li a").addClass('disabled');
// remove .disabled when you are done

Answer 2

You can add an onclick handler to the link that returns false.

document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​

The childNodes[0] just selects the first child which in this case is the <a>

E.g. http://jsfiddle.net/zYSeF/

Answer 3

Using the jQuery library, you can do something like this.

$('a').on('click', function() {
    return !$(this).attr('disabled');
});

To toggle being disabled, you can simply do this.

$('#tab_c a').attr('disabled', true); //add
$('#tab_c a').removeAttr('disabled'); //remove

jQuery