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

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

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   lt li class  quot disabled quot  gt Disabled List Item lt  li gt   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 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

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

[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