Menu
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?
687
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.
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.
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.
164
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
