javascript - 如何禁用 UL 中的特定 LI 元素？

Question

我有一个菜单<ul>。每个菜单项都是<li>当前可点击的。基于某些条件，我想禁用（使其不可点击）特定<li>元素。我怎样才能做到这一点？我也尝试在and上使用该disabled属性。都没有奏效。有什么建议么？<li>list-style:none

Answer 1

如果您仍想显示该项目但使其不可点击并使用 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>

此外，如果您使用的是 BootStrap，它们已经为此目的提供了一个名为 disabled 的类。请参阅此示例。

正如@LV98 指出的那样，用户可以在客户端更改它并提交您没有预料到的选择。您还需要在服务器上进行验证。

Answer 2

我通常使用<li>包含<a>链接。我禁用了这样的点击动作写作；您可能没有包含<a>链接，那么您将忽略我的帖子。

a.noclick       {
  pointer-events: none;
}

<a class="noclick" href="#">this is disabled</a>

Answer 3

使用 CSS3：http ://www.w3schools.com/cssref/sel_nth-child.asp

如果出于任何原因这不是一个选项，您可以尝试提供列表项类：

<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
...
</ul>

然后在你的CSS中：

li.one{display:none}/*hide first li*/
li.three{display:none}/*hide third li*/

Answer 4

使用 JQuery：http ://api.jquery.com/hide/

$('li.two').hide()

在 ：

<ul class="lul">
    <li class="one">a</li>
    <li class="two">b</li>
    <li class="three">c</li>
</ul>

准备好文件。

http://jsfiddle.net/2dDSG/