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?
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.
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