remove - jquery disable select

deshabilita un hipervínculo usando jQuery

Question

<a href="gohere.aspx" class="my-link">Click me</a>

yo si

$(''.my-link'').attr(''disabled'', true);

pero no funcionó

¿Hay una manera fácil de deshabilitar el hipervínculo utilizando jquery? Eliminar href? Preferiría no jugar con href. Así que si puedo hacerlo sin eliminar href, sería genial.

Answer 1

A continuación reemplazará el enlace con su texto.

$(''a'').each(function () {
    $(this).replaceWith($(this).text());
});

Editar:

El código anterior funcionará solo con hipervínculos con texto, no funcionará con imágenes. Cuando lo intentemos con un enlace de imagen no mostrará ninguna imagen.

Para que este código sea compatible con los enlaces de imágenes, lo siguiente funcionará bien.

// below given function will replace links with images i.e. for image links
$(''a img'').each(function () {
    var image = this.src;
    var img = $(''<img>'', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$(''a'').each(function () {
    $(this).replaceWith($(this).text());
});

explicación: en los fragmentos de código anteriores, en el primer fragmento estamos reemplazando todos los enlaces de imagen con sus imágenes solamente. Después de eso estamos reemplazando los enlaces de texto con su texto.

Answer 2

Anexar una clase que contenga eventos punteros: no

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass(''active'');

Answer 3

El atributo disabled no es válido en todos los elementos HTML que creo, consulte el artículo de MSDN . Eso y el valor adecuado para deshabilitado es simplemente "deshabilitado". Su mejor enfoque es vincular una función de clic que devuelva falso.

Answer 4

Eliminar el atributo href definitivamente parece ser el camino a seguir. Si por alguna razón lo necesita más tarde, lo almacenaría en otro atributo, por ejemplo,

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

Esta es la única forma de hacerlo que hará que el enlace aparezca deshabilitado y sin tener que escribir CSS personalizado. Solo unir un controlador de clic a falso hará que el enlace aparezca como un enlace normal, pero no ocurrirá nada al hacer clic en él, lo que puede resultar confuso para los usuarios. Si vas a ir a la ruta del controlador de clics, al menos también .addClass("link-disabled") y escribiré algo de CSS que haga que los enlaces con esa clase aparezcan como texto normal.

Answer 5

Esto también funciona bien. Es simple, ligero y no requiere que se use jQuery.

<a href="javascript:void(0)">Link</a>

Answer 6

La propiedad de los pointer-events CSS es un poco escasa cuando se trata de soporte ( caniuse.com ), pero es muy sucinta:

.my-link { pointer-events: none; } 

Answer 7

Puede enlazar un controlador de clic que devuelve falso:

$(''.my-link'').click(function () {return false;});

Para volver a habilitarlo nuevamente, desvincule el controlador:

$(''.my-link'').unbind(''click'');

Tenga en cuenta que disabled no funciona porque está diseñado solo para entradas de formulario.

jQuery ya ha anticipado esto, proporcionando un atajo a partir de jQuery 1.4.3:

$(''.my-link'').bind(''click'', false);

Y para desenlazar / volver a habilitar:

$(''.my-link'').unbind(''click'', false);

Answer 8

Sé que es una vieja pregunta pero parece que aún no se ha resuelto. Sigue mi solución ...

Simplemente agregue este controlador global:

$(''a'').click(function()
{
     return ($(this).attr(''disabled'')) ? false : true;
});

Aquí hay una demostración rápida: http://jsbin.com/akihik/3

Incluso puede agregar un poco de css para dar un estilo diferente a todos los enlaces con el atributo deshabilitado.

p.ej

a[disabled]
{
    color: grey; 
}

De todos modos, parece que el atributo deshabilitado no es válido para a etiqueta. Si prefiere seguir las especificaciones de w3c, puede adoptar fácilmente un atributo de data-disabled compatible con html5. En este caso, debe modificar el fragmento de código anterior y usar $(this).data(''disabled'') .

Answer 9

Tratar:

$(this).prop( "disabled", true );

Answer 10

function EnableHyperLink(id) {
        $(''#'' + id).attr(''onclick'', ''Pagination("'' + id + ''")'');//onclick event which u 
        $(''#'' + id).addClass(''enable-link'');
        $(''#'' + id).removeClass(''disable-link'');
    }

    function DisableHyperLink(id) {
        $(''#'' + id).addClass(''disable-link'');
        $(''#'' + id).removeClass(''enable-link'');
        $(''#'' + id).removeAttr(''onclick'');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}

Answer 11

$(''.my-link'').click(function(e) { e.preventDefault(); }); 

Podrías usar:

$(''.my-link'').click(function(e) { return false; }); 

Pero no me gusta usar esto yo mismo ya que es más críptico, a pesar de que se usa extensivamente a lo largo de mucho código jQuery.