Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 687
user811433 Avatar asked Mar 26 '13 17:03

user811433


People also ask

How do you disable the element Li?

Solution 2cal-filter li #1W"). attr("disabled","disabled"); since you know the Id you shall use selector directly. moreover this will disable the Anchor Tag inside the li element.

How do I disable a tag?

The best way to disable a link tag is by using the CSS property pointer-events: none; . When you apply pointer-events: none; to any element, all click events will be disabled. Because it applies to any element, you can use it to disable an anchor tag. By using a CSS class, you can disable multiple anchor tags at once.


2 Answers

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.

like image 164
Tony L. Avatar answered Oct 06 '22 12:10

Tony L.


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>
like image 29
Ishihara Avatar answered Oct 06 '22 10:10

Ishihara