javascript - disable - ¿Cómo puedo deshabilitar un elemento LI específico dentro de un UL?

html li readonly

Question

Tengo un menú que es un <ul> . Cada elemento del menú es un <li> y actualmente se puede hacer clic. Basado en algunas condiciones, quiero deshabilitar (hacer que no se pueda hacer clic) en un elemento <li> particular. ¿Cómo puedo conseguir esto? Intenté usar el atributo disabled en <li> y list-style:none también. Tampoco funcionó. ¿Alguna sugerencia?

Answer 1

Normalmente uso <li> para incluir el enlace <a> . He desactivado la acción de hacer clic escribiendo así; No puedes incluir el enlace <a> , entonces ignorarás mi publicación.

a.noclick       {
  pointer-events: none;
}

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

Answer 2

Si aún desea mostrar el elemento, pero no puede hacer clic y se ve deshabilitado con 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>

Además, si está utilizando BootStrap, ya tienen una clase llamada deshabilitada para este propósito. Vea este ejemplo .

Answer 3

Usando CSS3: http://www.w3schools.com/cssref/sel_nth-child.asp

Si esa no es una opción por cualquier motivo, puede intentar dar clases a los elementos de la lista:

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

Luego en tu css:

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

Answer 4

Usando JQuery: http://api.jquery.com/hide/

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

En:

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

En el documento listo.

http://jsfiddle.net/2dDSG/