¿Cómo habilitar o deshabilitar un ancla usando jQuery?

¿Cómo habilitar o deshabilitar un ancla usando jQuery?

Para evitar que un ancla siga lo especificado href, sugeriría usar preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Ver:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Consulte también esta pregunta anterior sobre SO:

jQuery deshabilita un enlace

La aplicación en la que estoy trabajando actualmente lo hace con un estilo CSS en combinación con JavaScript.

a.disabled { color:gray; }

Luego, cuando quiera deshabilitar un enlace, llamo

$('thelink').addClass('disabled');

Luego, en el controlador de clics para 'thelink', una etiqueta siempre ejecuto un cheque primero

if ($('thelink').hasClass('disabled')) return;

Encontré una respuesta que me gusta mucho más aquí

Se ve como esto:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

La habilitación implicaría establecer el atributo href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Esto le da la apariencia de que el elemento de anclaje se convierte en texto normal y viceversa.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Creo que una mejor solución es establecer el atributo de datos deshabilitado y anclar una verificación al hacer clic. De esta manera, podemos deshabilitar temporalmente un ancla hasta que, por ejemplo, el javascript termine con una llamada ajax o algunos cálculos. Si no lo deshabilitamos, podemos hacer clic rápidamente en él varias veces, lo que es indeseable ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Hice un ejemplo de jsfiddle: http://jsfiddle.net/wgZ59/76/

La respuesta seleccionada no es buena.

Utilice el estilo CSS de puntero-eventos . (Como sugirió Rashad Annara)

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

La simple adición del atributo "deshabilitado" al ancla hará el trabajo si tiene una regla CSS global como la siguiente:

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

Prueba las siguientes líneas

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, incluso si deshabilita la <a>etiqueta hreffuncionará, por lo que hreftambién debe eliminarla .

Cuando desee habilitar intente debajo de las líneas

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

Es tan simple como return false;

ex.

jQuery("li a:eq(0)").click(function(){
   return false;
})

o

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

En el archivo css

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

$("a").click(function(event) {
  event.preventDefault();
});

Si se llama a este método, la acción predeterminada del evento no se activará.

Si está tratando de bloquear toda interacción con la página, es posible que desee ver el complemento jQuery BlockUI

Nunca especificó realmente cómo deseaba que se desactivaran, o qué causaría la desactivación.

Primero, desea descubrir cómo establecer el valor en deshabilitado, para eso usaría las funciones de atributo de JQuery y hacer que esa función suceda en un evento , como un clic o la carga del documento.

Para situaciones en las que debe colocar texto o contenido html dentro de una etiqueta de anclaje, pero simplemente no desea que se realice ninguna acción cuando se hace clic en ese elemento (como cuando desea que un enlace de paginador esté en estado deshabilitado porque está la página actual), simplemente recorte el href. ;)

<a>3 (current page, I'm totally disabled!)</a>

La respuesta de @ michael-meadows me dio una pista sobre esto, pero todavía estaba abordando escenarios en los que todavía tienes que / estás trabajando con jQuery / JS. En este caso, si tiene control sobre cómo escribir el html en sí mismo, simplemente hacer una x-href de la etiqueta href es todo lo que necesita hacer, ¡entonces la solución es HTML puro!

Otras soluciones sin jQuery finagling que mantienen el href requieren que coloque un # en el href, pero eso hace que la página rebote a la parte superior, y solo quiere que esté simplemente deshabilitado. O dejándolo vacío, pero dependiendo del navegador, eso todavía hace cosas como saltar a la parte superior y, según los IDE, es HTML no válido. Pero aparentemente una aetiqueta es HTML totalmente válido sin HREF.

Por último, podría decir: De acuerdo, ¿por qué no simplemente volcar la etiqueta a por completo? Debido a que a menudo no puede, la aetiqueta se usa para propósitos de estilo en el marco CSS o el control que está usando, como el paginador de Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Entonces, con una combinación de las respuestas anteriores, se me ocurrió esto.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

Si no necesita que se comporte como una etiqueta de anclaje, preferiría reemplazarlo. Por ejemplo, si su etiqueta de anclaje es como

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

luego, utilizando jquery, puede hacerlo cuando necesite mostrar texto en lugar de un enlace.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

De esta manera, simplemente podemos reemplazar la etiqueta de anclaje con una etiqueta div. Esto es mucho más fácil (solo 2 líneas) y semánticamente correcto también (porque no necesitamos un enlace ahora, por lo tanto, no debería tener un enlace)

Deshabilitar o habilitar cualquier elemento con la propiedad deshabilitada.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );