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

Question

我有一个菜单，它是一个 <ul>。每个菜单项都是一个可点击的<li>元素。 根据某些条件，我想禁用（使其不可点击）特定的<li>元素。 我该如何实现？我尝试使用disabled属性和list-style:none，但都没有起作用。有什么建议吗？

- user811433

---

你能发布一个fiddle或者一些代码，这样我们才能帮助你。 - 97ldave

禁用<li>来自哪里？<li>没有默认的操作。 - anddoutoi

请与我们分享一些代码，这样我们可以更好地帮助您。 - Devang Rathod

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指出的那样，用户可以在客户端更改此设置并提交您未预期的选择。 您还需要在服务器上进行验证。

- Tony L.

---

谢谢。非常有帮助。 - Nikhil sHETH

不兼容IE浏览器 - Bimal Das

谁给我们点了踩，请提供反馈，否则什么也不会改变。 - Tony L.

只是想知道 - 用户能否删除样式并访问内容？ - Eduards

如果该值应该被禁用，则在服务器回发时检查以确保所选的禁用下拉列表值不是其中之一。这种情况很少发生，但检查是一个好主意。 - Tony L.

Answer 2

通常我使用<li>标签来包含<a>链接。如果您不包括<a>链接，那么您将忽略我的帖子。如果想禁用点击操作，请按以下方式编写：

a.noclick       {
  pointer-events: none;
}

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

- Ishihara

---

除此之外，如果想要使用“cursor: not-allowed”，则需要在<li>级别上定义它（而不是<a>）。 - OfirD

但我仍然可以通过键盘点击它！ - Ben.S

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*/

- gaynorvader

---

问题是关于禁用菜单中的列表项，而不是完全隐藏它。 - merrr

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/

- Mibou

---

问题是关于禁用菜单中的列表项，并非完全隐藏它。 - merrr