Cómo deshabilitar los enlaces HTML

No dudes en divulgar nuestra página y códigos con tus amigos, danos de tu ayuda para ampliar esta comunidad.

Solución:

No puede deshabilitar un enlace (de forma portátil). Puede utilizar una de estas técnicas (cada una con sus propias ventajas y desventajas).

Manera CSS

Esto debería ser la direccion correcta (pero ver más adelante) para hacerlo cuando la mayoría de los navegadores lo admitan:

a.disabled 
    pointer-events: none;

Es lo que hace, por ejemplo, Bootstrap 3.x. Actualmente (2016) solo es compatible con Chrome, FireFox y Opera (19+). Internet Explorer comenzó a admitir esto desde la versión 11, pero no para enlaces, sin embargo, está disponible en un elemento externo como:

span.disable-links 
    pointer-events: none;

Con:

...

Solución alterna

Probablemente, necesitemos definir una clase CSS para pointer-events: none pero y si nosotros reutilizar los disabled attribute en lugar de una clase CSS? Estrictamente hablando disabled no es compatible con pero los navegadores no se quejarán desconocido attributes. Utilizando el disabled attribute IE ignorará pointer-events pero respetará IE específico disabled attribute; otros navegadores compatibles con CSS ignorarán desconocidodisabled attribute y honor pointer-events. Más fácil de escribir que de explicar:

a[disabled] 
    pointer-events: none;

...

Tenga en cuenta que esto puede ser un portátil solución si necesita admitir IE (y puede cambiar su HTML) pero …

Dicho todo esto, tenga en cuenta que pointer-events deshabilita solo … eventos de puntero. Los enlaces seguirán siendo navegables a través del teclado. entonces también necesita aplicar una de las otras técnicas descritas aquí.

Atención

Junto con la técnica CSS descrita anteriormente, puede utilizar tabindex de forma no estándar para evitar que un elemento se enfoque:

...

Nunca verifiqué su compatibilidad con muchos navegadores, entonces es posible que desee probarlo usted mismo antes de usar esto. Tiene la ventaja de funcionar sin JavaScript. Desafortunadamente (pero obviamente) tabindex no se puede cambiar desde CSS.

Interceptar clics

Utilizar una href a una función de JavaScript, compruebe la condición (o la discapacidad attribute sí mismo) y no hacer nada por si acaso.

$("td > a").on("click", function(event)
    if ($(this).is("[disabled]")) 
        event.preventDefault();
    
);

Para deshabilitar los enlaces, haga esto:

$("td > a").attr("disabled", "disabled");

Para volver a habilitarlos:

$("td > a").removeAttr("disabled");

Si quieres en lugar de .is("[disabled]") puedes utilizar .attr("disabled") != undefined (jQuery 1.6+ siempre regresará undefined cuando el attribute no está configurado) pero is() es mucho más claro (gracias a Dave Stewart por este consejo). Tenga en cuenta que aquí estoy usando el disabled attribute de una manera no estándar, si le importa esto, reemplace attribute con una clase y reemplazar .is("[disabled]") con .hasClass("disabled") (agregando y quitando con addClass() y removeClass()).

Zoltán Tamási señaló en un comentario que “en algunos casos, el evento de clic ya está vinculado a alguna función” real “(por ejemplo, usando knockoutjs). En ese caso, la ordenación del controlador de eventos puede causar algunos problemas. Por lo tanto, implementé enlaces deshabilitados vinculando un retorno false controlador al enlace touchstart, mousedown y keydown eventos. Tiene algunos inconvenientes (evitará que se inicie el desplazamiento táctil en el enlace) “ pero el manejo de eventos de teclado también tiene la ventaja de evitar la navegación por teclado.

Tenga en cuenta que si href no está borrado, es posible que el usuario visite manualmente esa página.

Limpiar el enlace

Limpiar el href attribute. Con este código, no agrega un controlador de eventos, sino que cambia el enlace en sí. Utilice este código para deshabilitar los enlaces:

$("td > a").each(function() 
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
);

Y este para volver a habilitarlos:

$("td > a").each(function() 
    this.attr("href", this.data("href")).removeAttr("disabled");
);

Personalmente no me gusta mucho esta solución (si no tienes que hacer más con los enlaces deshabilitados) pero mayo ser más compatible debido a varias formas de seguir un enlace.

Controlador de clics falsos

Agregar / quitar un onclick función donde tu return false, no se seguirá el enlace. Para deshabilitar enlaces:

$("td > a").attr("disabled", "disabled").on("click", function() 
    return false; 
);

Para volver a habilitarlos:

$("td > a").removeAttr("disabled").off("click");

No creo que haya ninguna razón para preferir esta solución en lugar de la primera.

Estilismo

El estilo es aún más simple, sea cual sea la solución que esté utilizando para deshabilitar el enlace, agregamos un disabled attribute para que pueda usar la siguiente regla CSS:

a[disabled] 
    color: gray;

Si está usando una clase en lugar de attribute:

a.disabled 
    color: gray;

Si está utilizando un marco de interfaz de usuario, es posible que vea que discapacitado los enlaces no tienen el estilo adecuado. Bootstrap 3.x, por ejemplo, maneja este escenario y el botón tiene el estilo correcto tanto con disabled attribute y con .disabled clase. Si, en cambio, está limpiando el enlace (o usando una de las otras técnicas de JavaScript), también debe manejar el estilo porque un sin href todavía está pintado como habilitado.

td.disabledAnchor a
       pointer-events: none !important;
       cursor: default;
       color:Gray;

import Key, Keycodes from 'key.js'

export default class AnchorDisabler 
  constructor (config =  selector: 'a.disabled' ) 
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  

  isStillDisabled (ev) 

  onFocus (ev) 
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) 
      return
    

    let focusables = $(':focusable')
    if (!focusables) 
      return
    

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) 
      next = focusables.eq(current + 1)
     else 
      next = focusables.eq(0)
    

    if (next) 
      next.focus()
    
  

  onClick (ev) 
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) 
      return
    

    ev.preventDefault()
    return false
  

  onKeyup (ev) 
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) 
      return
    

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) 
      return
    

    ev.preventDefault()
    return false
  

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Utiliza Nuestro Buscador