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?

Freehand

can you post a fiddle? or some code so we can help you. – Deathful

Disabling the <li> from what? There are no default actions on <li>s. – Tadd

Share some code with us so we can help you better. – Amends

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.

As @LV98 pointed out, users could change this on the client side and submit a selection you weren't expecting. You will want to validate at the server as well.

Lueluebke

Thanks. Very helpful – Motherly

does not work in IE – Stylobate

@BimalDas What version of IE. I just tested in IE 11 and it is working. – Lueluebke

@TonyL. When the page loads , it works. But at the bottom of IE window , one script alert will come showing "Internet Explorer restricted the webpage from running scripts or ACtiveX controls." When I click "Allow Blocked Content", .disabled class does not work after that. – Stylobate

@BimalDas It sounds like you have another script or control running that possibly interferes with this CSS. – Lueluebke

Whoever downvoted, please offer us feedback or nothing will change. – Lueluebke

Just wondering - can the user remove the style and access the content? – Virendra

@LV98 This is a good point. I believe they could. You would want to validate at the server as well. – Lueluebke

@TonyL. Any ideas how this is possible? – Virendra

@LV98 If the value should be disabled, then check on the server postback to make sure that the disabled dropdown value was not the one selected. Won't happen often, if ever, but a good idea to check. – Lueluebke

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>

Stevens

To add upon that, if one wants to have cursor: not-allowed, then it needs to be defined on the <li> level (and not the <a>). – Stapes

but I can still click it via keyborad! – Fleisig

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*/

Planometer

The question is about disabling a list item in a menu, not hiding it completely. – Senskell

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/

Ourselves

The question is about disabling a list item in a menu, not hiding it completely. – Senskell