0

Quiero deshabilitar este enlace durante unos segundos.

<a href="#" data-role="button" data-theme="f" data-rel="popup" id="deshabilitar" type="button" data-icon="cloud-upload" data-iconshadow="true" onclick="deshabilitar()"></a>

para que solo permita clicar una vez. En la funcion tengo este codigo pero no me lo hace y no veo el porque. Gracias.

 var button = $('#deshabilitar');
button.attr('disabled', 'disabled');
setTimeout(function() {
     button.removeAttr('disabled');
},3000);

https://jsfiddle.net/u2c6wdgq/1/

1
  • Pon un jsfiddle para que podamos verlo mejor.
    – Flowen
    Commented el 13 sept. 2017 a las 10:18

5 respuestas 5

2

Lo que podrías hacer es asignarle a el enlace la propiedad pointer-events de css con valor none mediante javascript y en unos segundos después remover ese propiedad para que vuelva a estar habilitado.

Aquí te dejo un ejemplo:

Este sería el HTML:

<a href="#" onclick="deshabilitar(this)">Dame click</a>

Y este el javascript:

function deshabilitar( link ){
    link.style.pointerEvents = 'none';
    link.style.color = '#bbb';

    setTimeout(function(){
        link.style.pointerEvents = null;
        link.style.color = 'blue';
    }, 3000);
}

Lo he probado y funciona, espero y te sirva.

1

Quizá no tenías bien la referencia, prueba con:

function deshabilitar() {
    $(this).attr('disabled', 'disabled');
    setTimeout(function() {
        $(this).removeAttr('disabled');
    }, 3000);
}
1
  • Lo que quiero hacer es que cuando sea pulsado, durante unos segundos no se pueda volver a pulsar. Preo como esta ahi si puedo hacerlo de nuevo
    – tripossi
    Commented el 13 sept. 2017 a las 10:26
1

Creo que el problema está en que no se puede añadir el atributo disabled a un enlace. En este link (en inglés) tienes información de cual es la mejor manera de deshabilitarlo

2
  • Cierto justo lo estaba viendo, recomiendan eliminar en propio enlace para lograrlo. Commented el 13 sept. 2017 a las 10:35
  • Gracias, voy a mirarlo a ver que dice
    – tripossi
    Commented el 13 sept. 2017 a las 10:35
1

Un link no es un control de formulario para que puedas deshabilitarlo y evitar el comportamiento por defecto.

Intenta agregando un estado de habilitado/deshabilitado al link y segun el estado del link, haces la accion correspondiente.

Aquí un ejemplo:

$('#deshabilitar').click(function(){
   var $this = $(this)
   
   if($this.hasClass('inhabilitado')) {
     alert("link unhabilitado");
   }
   
    $this.addClass('inhabilitado');
    setTimeout(function() {
        $this.removeClass('inhabilitado');
        alert("link habilitado")
    }, 3000);
});
.inhabilitado{
  color:#ccc;
  cursor:default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-role="button" data-theme="f" data-rel="popup" id="deshabilitar" type="button" data-iconshadow="true">link</a>

Lo que hace es simple, agregar una clase llamado deshabilitado cuando se hace clic sobre elemento. Esta clase cambia el color y el cursor para dar la impresion que esta deshabilitada. Luego despues del tiempo transcurrido se eliminan los estilos y el link vuelve a estar habilitado.

0
function  noEjecutarLink(e) {
    // prevenir comportamento normal del link
    e.preventDefault();
    // código a executar aqui
}

function generarLink(id){   
    let link=document.getElementById('link');//el div donde se agrega el >atributo a
    link.innerHTML = ''//limpia la etiqueta del atributo a
    let a = document.createElement("a");
    a.setAttribute("href", `../institucional?id=${id}`);//la pagina >destino
    let aTexto = document.createTextNode("INSTITUCIONAL");//rotulo del >link

    a.appendChild(aTexto);
    link.appendChild(a);

    if (id===0){
    //la primera vez el id es 0; la funcion generarLink se llama luego de >encontrar un
    // id valido
        a.style.cursor='not-allowed';//cursor prohibido
        a.addEventListener('click', noEjecutarLink, false);
    }
}


//se carga por primera vez la pagina
generarLink(0);
1
  • ¿Por qué el comentario // código a executar aqui? Además, en lo posible, procura explicar el código también fuera de los comentarios, para mejor legibilidad. Recuerda siempre responder en base a Cómo responder.
    – padaleiana
    Commented el 5 sept. 2023 a las 11:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.