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

css, html-lists, javascript, listitem

Solution

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.

Problem

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?

Original source