How can I disable a specific LI element inside a UL

Question

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

User · Answer

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.

User · Answer

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    lt ul gt   lt li class  one  gt  lt  li gt   lt li class  two  gt  lt  li gt   lt li class  three  gt  lt  li gt       lt  ul gt    Then in your css   li one display none   hide first li   li three display none   hide third li

User · Answer

Using JQuery   http   api jquery com hide      li two   hide     In     lt ul class  lul  gt       lt li class  one  gt a lt  li gt       lt li class  two  gt b lt  li gt       lt li class  three  gt c lt  li gt   lt  ul gt    On document ready   http   jsfiddle net 2dDSG

User · Answer

I usualy use  lt li gt  to include  lt a gt  link  I disabled click action writing like this  You may not include  lt a gt  link  then you will ignore my post    x000D   x000D  a noclick         x000D    pointer-events  none  x000D    x000D   lt a class  noclick  href     gt this is disabled lt  a gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to css

Examples related to html-lists

Examples related to listitem