baulcode
Desactivar vínculos jQuery y CSS: Ejemplos Completos. En este Post aprenderemos a desactivar o deshabilitar (links, vínculos, enlaces) usando CSS y el lenguaje jQuery. Por lo tanto, existen ocasiones en que tenemos que desactivar el acceso a ciertos vínculos.
Para lograr tal objetivo tenemos que usar varios métodos y conseguir que la aplicación se comporte de la manera que deseamos. A continuación, detallaremos 3 formas de cómo podemos desactivar vínculos.
Desactivar vínculos jQuery y CSS: Ejemplos Completos
Desactivar vínculos jQuery y CSS Ejemplos Completos
Primera Forma: Desactivar vínculos con CSS
Esta opción puede ocurrir en cualquier etapa de desarrollo de una plataforma web o en la sección configuración. Sin embargo, pueden existir ciertos enlaces que no queremos que funcionen como tal y deseamos que se muestren desactivados. Veamos un ejemplo aplicando una clase CSS a un enlace HTML tipo «HREF«.
.enlace_desactivado {
pointer-events: none;
cursor: default;
}
A continuación, tenemos que declarar esta clase en la etiqueta de vínculos del HTML «<a href></a>«. Aquí les mostrare un ejemplo de cómo implementar la clase .enlace desactivado de manera correcta.
<a class="enlace_desactivado" href="https://www.google.es/">Este enlace ha sido desactivado con CSS</a>
Para darle un poco de estética podríamos añadir a nuestra clase propiedades para quitar el color de enlace (text-decoration:none;), cambiar el color del enlace, entre otras propiedades.
Ahora te muestro el ejemplo completo del script HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<meta name="robots" content="noindex">
<title>Desabilitar enlace con jQuery</title>
<style>
.enlace_desactivado { pointer-events: none;
color:grey;
cursor: not-allowed;
}
</style>
</head>
<body>
<h2>Desactivar vinculos usando CSS</h2>
<a class="enlace_desactivado" href="https://www.google.com/">Este enlace ha sido desactivado con CSS</a>
</body>
</html>
Segunda forma: Usando CSS
Si estamos usando CSS podemos agregar estilo al vínculo basado en el atributo «aria-disabled«. Por lo tanto, en este ejemplo usaremos el atributo ARIA como ganchos para CSS.
Con esto hemos logrado desactivado el enlace, excepto, sólo es desactivado para los usuarios que usan ratón haciendo clic.
¿Qué sucede con los navegadores que no admiten eventos de puntero «pointer-events»?
Algunos navegadores traen problemas de compatibilidad como opera mini e IE < 11. IE11 y Edge no admiten eventos de puntero. Además, esto genera que los usuarios que usan mouse no recibirán la indicación visual adicional de que el vínculo está deshabilitado. Para optimizar podemos realizar lo siguiente.
.esDesactivado {
cursor: not-allowed;
opacity: 0.5;
}
a[aria-disabled="true"] {
color: currentColor;
display: inline-block; /* For IE11/ MS Edge bug */
pointer-events: none;
text-decoration: none;
}
En el HTML contendría el siguiente código y tendría el siguiente aspecto.
<span class="esDesactivado"> <a href="https://google.com" aria-disabled="true">Desactivar enlace</a> </span>
Ejemplo completo de la segunda opción.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Desactivar Enlace</title>
<style type="text/css">
.esDesactivado {
cursor: not-allowed;
opacity: 0.5;
}
a[aria-disabled="true"] {
color: currentColor;
display: inline-block; /* For IE11/ MS Edge bug */
pointer-events: none;
text-decoration: none;
}
</style>
</head>
<body>
<span class="esDesactivado">
<a href="https://google.com" aria-disabled="true">Desactivar Enlace</a>
</span>
</body>
</html>
Tercera forma: Deshabilitar un enlace con jQuery
Aquí, ya usaremos un lenguaje de programación llamado jQuery en el cual podemos enlazar un controlador de evento clic que devuelva false a mi clase CSS:
$('.MiEnlace').click(function() {return false;});
Para volver a habilitarlo de nuevo, desenlazar el controlador:
$('.MiEnlace').unbind('click');
Ejemplo de uso:
a) Declaramos la librería jQuery para que funcione correctamente, esa línea de código debe ser declarado dentro de la etiqueta head de nuestro fichero.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
b) Además, podemos agregar estilos CSS para el color del enlace desactivado, incluso podemos agregar un poco de CSS para dar un estilo diferente a todos los vínculos con el atributo Disabled.
a[disabled]
{
color: grey;
}
c) Para este ejemplo nos apoyaremos en listas HTML y los vínculos con viñetas para que todo este ordenado. Ahora, veamos la declaración de los enlaces en listas HTML.
<ul>
<li><a href="https://www.baulcode.com" disabled="disabled">BaulCode (Enlace Desactivado)</a></li>
<li><a href="https://www.baulcode.com">BaulCode (Enlace Activado)</a></li>
</ul>
d) Por ultimo declaramos el script jQuery que desactiva los enlaces.
(function($){
$('a').click(function()
{
return ($(this).attr('disabled')) ? false : true;
});
})(jQuery);
Importante.- El atributo «disabled» no es válido para las etiquetas. Si desea apegarse a las normas y las especificaciones del W3C, puede adoptar fácilmente un atributo de datos deshabilitado compatible con HTML5. En este caso, tiene que modificar el fragmento anterior y usar $(this).data("disabled"). A continuación, un ejemplo.
$("a.MiEnlace").click(function(e){
e.preventDefault();
if($(this).data("disabled") == false) {
$("a.MiEnlace").data("disabled", true);
dialog(this);
}
});
Mostramos el ejemplo completo usando el lenguaje jQuery
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<meta name="robots" content="noindex">
<title>Desabilitar enlace con jQuery</title>
<style>
a[disabled]
{
color: grey;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.baulcode.com" disabled="disabled">BaulCode (Enlace Desactivado)</a></li>
<li><a href="https://www.baulcode.com">BaulCode (Enlace Activado)</a></li>
</ul>
<script>
(function($){
$('a').click(function()
{
return ($(this).attr('disabled')) ? false : true;
});
})(jQuery);
</script>
</body>
</html>
Desactivar vínculos con jQuery: Reemplazando HREF
Este es otro ejemplo de cómo podemos desactivar link usando jQuery pero eliminando el atributo «href» definitivamente y parece ser el camino a seguir. Si por alguna razón lo necesita más tarde, simplemente lo reemplazara a otro atributo, por ejemplo.
$(".MiEnlace").each(function() {
$(this).attr("data-oldhref", $(this).attr("href"));
$(this).removeAttr("href");
});
Contenido HTML aplicando jQuery para quitar los vínculos. Sin embargo, tenemos que agregar una clase como atributo a nuestro vinculo, la clase tendrá como nombre (class="MiEnlace").
<ul> <li><a class="MiEnlace" href="https://www.baulcode.com">BaulCode (Enlace Desactivado)</a></li> <li><a href="https://www.baulcode.com">BaulCode (Enlace Activado)</a></li> </ul>
Ejemplo completo de la segunda opción usando jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="robots" content="noindex">
<title>Desabilitar enlace con jQuery</title>
<style type="text/css">
.MiEnlace {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
color:grey;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
<li><a class="MiEnlace" href="https://www.baulcode.com">BaulCode (Enlace Desactivado)</a></li>
<li><a href="https://www.baulcode.com">BaulCode (Enlace Activado)</a></li>
</ul>
<script>
$(".MiEnlace").each(function() {
$(this).attr("data-oldhref", $(this).attr("href"));
$(this).removeAttr("href");
});
</script>
</body>
</html>
CONCLUSIÓN DEL ARTÍCULO
En este artículo hemos aprendido como podemos desactivar un vínculo HTML usando estilos CSS y si por alguna razón fallaba la validación por cuestiones de compatibilidad de navegadores, hemos aprendido también a deshabilitarlo usando el lenguaje de jQuery en varios ejemplos.
Les recomiendo que interactúen con los ejemplos de este articulo para que puedan aplicarlo en sus proyectos web.
Espero que esta pequeña información les sirva bastante y siéntase libre de realizar un comentario al término del artículo.
