How can I disable a specific LI element inside a UL?

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?

can you post a fiddle? or some code so we can help you. – 97ldave Mar 26 '13 at 17:21 — 97ldave, Mar 26 '13 at 17:21
Share some code with us so we can help you better. – Devang Rathod Mar 26 '13 at 17:24 — Devang Rathod, Mar 26 '13 at 17:24

Tony L. · Answer 1 · 2020-08-06T14:43:19.470

138

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.

edited Aug 06 '20 at 14:43

answered Mar 09 '16 at 21:07

Tony L.

17,638
8
69
66

2

Thanks. Very helpful – Nikhil sHETH Apr 19 '17 at 08:08
1

does not work in IE – Bimal Das Jun 12 '17 at 09:08
@BimalDas What version of IE. I just tested in IE 11 and it is working. – Tony L. Jun 12 '17 at 20:23
@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. – Bimal Das Jun 13 '17 at 05:32
@BimalDas It sounds like you have another script or control running that possibly interferes with this CSS. – Tony L. Jun 13 '17 at 21:19
1

Whoever downvoted, please offer us feedback or nothing will change. – Tony L. Sep 14 '17 at 13:44
2

Just wondering - can the user remove the style and access the content? – Eduards Aug 06 '20 at 08:17
@LV98 This is a good point. I believe they could. You would want to validate at the server as well. – Tony L. Aug 06 '20 at 14:42
@TonyL. Any ideas how this is possible? – Eduards Aug 06 '20 at 14:42
1

@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. – Tony L. Aug 07 '20 at 18:20

score 8 · Answer 2 · edited Sep 14 '17 at 08:54

8

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>

edited Sep 14 '17 at 08:54

YakovL

7,557
12
62
102

answered Sep 14 '17 at 08:23

Ishihara

91
1
1

1

To add upon that, if one wants to have `cursor: not-allowed`, then it needs to be defined on the `
` level (and not the ``).

OfirD

Jan 14 '20 at 17:56

but I can still click it via keyborad! – Ben.S Jul 20 '21 at 13:52

score 2 · Answer 3 · answered Mar 26 '13 at 17:25

2

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

answered Mar 26 '13 at 17:25

gaynorvader

2,619
3
18
32

6

The question is about disabling a list item in a menu, not hiding it completely. – merrr Jan 05 '17 at 15:52

score -1 · Answer 4 · answered Mar 26 '13 at 17:29

-1

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/

answered Mar 26 '13 at 17:29

Mibou

936
2
13
25

3

The question is about disabling a list item in a menu, not hiding it completely. – merrr Jan 05 '17 at 15:51

How can I disable a specific LI element inside a UL?

4 Answers4

Linked