jquery - rae - que es hacer doble clic

¿Cómo se hace que un enlace de anclaje no se pueda cliquear o deshabilitar?

Question

Tengo un enlace de anclaje que quiero deshabilitar una vez que el usuario hace clic en él. O bien, elimine la etiqueta delimitadora de todo el texto, pero definitivamente conserve el texto.

<a href='''' id=''ThisLink''>some text</a>

Puedo hacer esto fácilmente con un botón agregando .attr("disabled", "disabled");
Agregué la propiedad deshabilitada con éxito, pero aún se puede hacer clic en el enlace.
Realmente no me importa si el texto está subrayado o no.

¿Cualquier pista?

Cuando haces clic en el músico incorrecto, solo debe agregar "Incorrecto" y luego dejar de ser cliqueable.
Cuando haces clic y estás en lo correcto, debe agregar "Impresionante" y luego desactivar todas las etiquetas <a> .

Answer 1

Agrega una clase css :

.disable_a_href{
    pointer-events: none;
}

Agrega este jquery :

$("#ThisLink").addClass("disable_a_href"); 

Answer 2

Bootstrap nos proporciona la clase .disabled . Por favor úsala

Pero la clase .disabled solo funciona cuando la etiqueta ''a'' ya tiene la clase ''btn''. No funciona con ninguna etiqueta ''a'' anterior. La clase ''btn'' puede no ser apropiada en algún contexto ya que tiene connotaciones de estilo. Bajo las carátulas, la clase .disabled establece pointer-events en none, por lo que puede hacer que css haga lo mismo que Saroj Aryal y Vitrilo han sugerido. (Gracias, Les Nightingill por este consejo).

Answer 3

Crear la siguiente clase en la hoja de estilos:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

Agregue esta clase a su enlace dinámicamente de la siguiente manera.

 <a href='''' id=''elemID''>some text</a>

    //   or using jquery
<script>
    $(''#elemID'').addClass(''ThisLink'');
 </script>

Answer 4

El método más limpio sería agregar una clase con eventos de puntero: ninguno cuando desee desactivar un clic. Funcionaría como una etiqueta normal.

.disableClick{
    pointer-events: none;
}

Answer 5

Escribe esto una sola línea de código jQuery

$(''.hyperlink'').css(''pointer-events'',''none'');

si quieres escribir en el archivo css

.hyperlink{
    pointer-events: none;
}

Answer 6

Este es el método que solía desactivar. Espero que ayude.

$("#ThisLink").attr("href","javascript:void(0)");

Answer 7

La forma más fácil

En tu html:

<a id="foo" disabled="true">xxxxx<a>

En tu js:

$(''#foo'').attr("disabled", false);

Si lo usa como atributo funciona a la perfección

Answer 8

La mejor manera es evitar la acción predeterminada. En el caso de la etiqueta de anclaje, el comportamiento predeterminado es redirigir a la dirección especificada href .

Entonces, seguir javascript funciona mejor en la situación:

$(''#ThisLink'').click(function(e)
{
    e.preventDefault();
});

Answer 9

Los comentarios de Jason MacDonald funcionaron para mí, probados en Chrome, Mozila e IE.

Se agregó color gris para mostrar el efecto de desactivación.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery estaba seleccionando solo el primer elemento en la lista de anclaje, agregó el carácter meta (*) para seleccionar y deshabilitar todo elemento con id #ThisLink .

$("#ThisLink*").addClass("disable_a_href"); 

Answer 10

Me acabo de dar cuenta de lo que estabas pidiendo (espero). Aquí hay una solución fea

var preventClick = false;

$(''#ThisLink'').click(function(e) {
    $(this)
       .css(''cursor'', ''default'')
       .css(''text-decoration'', ''none'')

    if (!preventClick) {
        $(this).html($(this).html() + '' lalala'');
    }

    preventClick = true;

    return false;
});

Answer 11

Prueba esto:

$(''a'').contents().unwrap();

Answer 12

Puede usar el evento onclick para deshabilitar la acción de hacer clic:

<a href='''' id=''ThisLink'' onclick=''return false''>some text</a>

O puede usar algo que no sea una etiqueta <a> .

Answer 13

Simplemente elimine el atributo href de la etiqueta de anclaje.

Answer 14

Simplemente en SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Answer 15

La respuesta seleccionada no es buena.

Usar estilo CSS de eventos de puntero . (como Jason MacDonald sugirió)

Ver MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Es compatible con la mayoría de los navegadores.

El simple agregado de un atributo "deshabilitado" al ancla hará el trabajo si tienes una regla de CSS global como la siguiente:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Answer 16

$(''#ThisLink'').one(''click'',function(){
  $(this).bind(''click'',function(){
    return false;
  });
});

Esta sería otra forma de hacerlo, el controlador con return false , que deshabilitará el enlace, se agregará después de un clic.

Answer 17

$(''a'').removeAttr(''href'')

o

$(''a'').click(function(){ return false})

Depende de la situación

Answer 18

<a href=''javascript:void(0);''>some text</a>