How can I disable a specific LI element inside a UL? [closed]

Question

I have a menu which is a <ul>. Each menu item is a <li> and currently clickable. Based on some conditions, I want to disable (make it not clickable) a particular <li> element. How can I achieve this? I tried using the disabled attribute on the <li> and list-style:none as well. Neither worked. Any suggestions?

Answer 1

If you still want to show the item but make it not clickable and look disabled with CSS:

CSS:

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

HTML:

<li class="disabled">Disabled List Item</li>

Also, if you are using BootStrap, they already have a class called disabled for this purpose. See this example.

Answer 2

I usualy use <li> to include <a> link. I disabled click action writing like this; You may not include <a> link, then you will ignore my post.

a.noclick       {
  pointer-events: none;
}

<a class="noclick" href="#">this is disabled</a>

Answer 3

Using CSS3: http://www.w3schools.com/cssref/sel_nth-child.asp

If that's not an option for any reason, you could try giving the list items classes:

<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
...
</ul>

Then in your css:

li.one{display:none}/*hide first li*/
li.three{display:none}/*hide third li*/

Answer 4

Using JQuery : http://api.jquery.com/hide/

$('li.two').hide()

In :

<ul class="lul">
    <li class="one">a</li>
    <li class="two">b</li>
    <li class="three">c</li>
</ul>

On document ready.

http://jsfiddle.net/2dDSG/