En esta entrada voy a desarrollar una solución personal al problema de habilitar o deshabilitar un enlace web mediante Javascript.
Para ello he optado por modificar el atributo href del enlace, de manera que si el enlace está deshabilitado, cuando se haga clic en el enlace no se realice ninguna acción. Con esta solución no importa si el valor de href es una acción Javascript o una URL a la que se enlaza, cuando se desactive el enlace dejará de funcionar y cuando se vuelva a activar volverá a realizar la acción que tenía indicada en href.
Para ello, he creado dos funciones Javascript: una que activa el enlace y otra que lo desactiva. Las dos reciben como parámetro el enlace a activar o desactivar. Estas funciones son las siguientes:
function activarEnlaceJavascript(enlace){
var href = enlace.href;
var patron = /^javascript:;\/\*[\s\S]*\*\/$/;
if(patron.test(enlace.href)){
href = href.replace(/javascript:;\/\*/g, "");
href = href.substr(0, href.length - 2);
}
enlace.href = href;
}
function desactivarEnlaceJavascript(enlace){
var href = enlace.href;
var patron = /^javascript:;\/\*[\s\S]*\*\/$/;
if(!patron.test(href))
href = "javascript:;/*" + href + "*/";
enlace.href = href;
}
La función desactivarEnlaceJavascript() cambia el atributo href para que ejecute un código Javascript vacío. Si el valor del campo href del enlace original es valorHref, al desactivar el enlace el valor nuevo del campo href quedará como javascript:;/*valorHref*/. De esta manera, cuando hagamos clic en el enlace no se realizará ninguna acción, ya que el valor del enlace original quedará dentro de los comentarios y no se ejecutará.
El enlace sólo se desactivará si el campo href no cumple la expresión regular /^javascript:;\/\*[\s\S]*\*\/$/, lo que significa que no ha sido desactivado anteriormente, por lo que se puede desactivar. Esta expresión regular comprueba que el enlace comience por la cadena javascript:;/*, continúe por cualquier número de caracteres y finalice con */, que sería la forma de un enlace desactivado.
La función activarEnlaceJavascript() se encarga simplemente de volver a restaurar el valor original del campo href del enlace. Esta función quita lo que había añadido la función desactivarEnlaceJavascript(): el trozo de código javascript:;/* de la parte inicial y la finalización del comentario */ de la parte final. La activación del enlace sólo se producirá si se cumple la expresión regular ya citada anteriormente, lo que significa que sólo se activará si se encuentra en estado desactivado.
Pongo el código HTML de una pequeña página para probar el funcionamiento de la activación y desactivación. Esta página contiene un enlace y dos botones: uno para activar el enlace y otro para desactivarlo.
<html>
<head>
<script type="text/javascript">
function desactivarEnlaceJavascript(enlace){
var href = enlace.href;
var patron = /^javascript:;\/\*[\s\S]*\*\/$/;
if(!patron.test(href))
href = "javascript:;/*" + href + "*/";
enlace.href = href;
}
function activarEnlaceJavascript(enlace){
var href = enlace.href;
var patron = /^javascript:;\/\*[\s\S]*\*\/$/;
if(patron.test(enlace.href)){
href = href.replace(/javascript:;\/\*/g, "");
href = href.substr(0, href.length - 2);
}
enlace.href = href;
}
</script>
</head>
<body>
<a href="http://www.wordpress.com">Enlace</a>
<input type="button" onclick="activarEnlaceJavascript(document.getElementsByTagName('a')[0])" value="Activar" />
<input type="button" onclick="desactivarEnlaceJavascript(document.getElementsByTagName('a')[0])" value="Desactivar"/>
</body>
</html>
Espero que os sea útil 
.
0 Respuestas a “Truquillos de desarrollo web y programación #2: habilitar y deshabilitar un enlace con Javascript”