2

Buen día, estoy buscando la forma de deshabilitar un botón dentro de una etiqueta <a>, Dejo código. Busco que el boton no se pueda presionar.

   <div class="player-section p16-y fxb fxb-wrp fxb-btw fxb-m">
      <div class="player-btn group"> 
<a href="https://web.com/1" class="player-btn">Anterior</a> 
<a href="https://web.com/2" class="player-btn">Siguiente 28-08-2020</a> #boton que busco desactivar
</div>

Intente con disable, disable = True pero no funciona

4
  • La forma correcta para deshabilitar es disabled, pero ¿Que es lo que quieres conseguir? además de lo obvio que es deshabilitar el <a>. Saludos. Commented el 21 ago. 2020 a las 20:36
  • @JosueArriola Gracias por responder, Busco que el boton no se pueda presionar
    – RicharlyxD
    Commented el 21 ago. 2020 a las 20:38
  • Entiendo, pero el tag <a> no tiene el atributo disabled, lo que puedes intentar es usar JS o jQuery para editar el href y poner algo como # o para quitar el tag <a>. Saludos. Commented el 21 ago. 2020 a las 20:40
  • 1
    Hola, te deje las opciones disponibles aquí: es.stackoverflow.com/a/383809/46896 puedes escoger la que mejor te parezca.
    – user46896
    Commented el 21 ago. 2020 a las 21:21

4 respuestas 4

7

Puedes agregar una clase en el CSS que desactive los eventos del ratón:

Documentación sobre pointer-events: developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

.not-active { 
            pointer-events: none; 
            cursor: default; 
        } 
    <div class="player-section p16-y fxb fxb-wrp fxb-btw fxb-m">
          <div class="player-btn group"> 
    <a href="https://web.com/1" class="player-btn">Anterior</a> 
    <a href="https://web.com/2" class="player-btn not-active">Siguiente 28-08-2020</a> #boton que busco desactivar
    </div>

2
  • Edité tu respuesta para que el código se pueda probar aquí mismo, utilizando snippets, que soportan HTML, css y javascript, pulsa el botón de editar para aprender como se hace. Un saludo.
    – jachguate
    Commented el 21 ago. 2020 a las 20:46
  • Claro que si : )
    – Jorge Luis
    Commented el 21 ago. 2020 a las 20:56
3

Hay varias formas de hacerlo.

Partiendo de un link como este:

<a href="http://www.google.com/" target="_blank">Link</a>

Opción #1 CSS

si le pones una clase a la etiqueta y el css siguiente, como por ejemplo:

.disabled {
    cursor: not-allowed;
    pointer-events: none;
}
    <a class="disabled" href="http://www.google.com/" target="_blank">Link</a>

Opción #2 jquery + css

Usando Jquery para agregar el CSS:

//dentro del document ready
$.each($('a.disabled'), function(index, value) {
  $(this).css('pointer-events','none');
  $(this).css('cursor','not-allowed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>

Opción #3 jquery + Control de Evento

Usando Jquery para Controlar el Evento:

//dentro del document ready
$.each($('a.disabled'), function(index, value) {
  $(this).bind('click', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>
<a class="disabled" href="http://www.google.com/" target="_blank">Link</a>

1
  • Gracias Justo lo que buscaba me funciono la opción : Opción #2 jquery + css.
    – Cesarin
    Commented el 31 oct. 2023 a las 22:45
0

Las etiquetas <a> no tienen disable. Lo único que puedes hacer para asegurarte de que esté desactivada es eliminar su href. Hay varias maneras de hacerlo:

<a href="https://web.com/2" class="player-btn disable-me">Siguiente 28-08-2020</a>
//jQuery
$('.disable-me').attr('href', '');
//Javascript
document.getElementsByClassName("disable-me").removeAttribute("href");
//Con css --Esta última manera no es funcional en el 100% de casos/navegadores/apps
.disable-me{
  pointer-events: none;
}

0

Con jquery, pada deshabilitar:

$(".player-btn:last-child").bind('click', false);

Y para volver a habilitar:

$(".player-btn:last-child").unbind('click', false);

Supongo que lo quiere hacer dependiendo de algún evento. Puede agregar al mismo alguna clase te le ponga un "opacity: .5;" cuando se realize, y viceversa al habilitarlo nuevamente.

$(".player-btn:last-child").bind('click', false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="player-section p16-y fxb fxb-wrp fxb-btw fxb-m">
      <div class="player-btn group"> 
<a href="https://web.com/1" class="player-btn">Anterior</a> 
<a href="https://web.com/2" class="player-btn">Siguiente 28-08-2020</a> #boton que busco desactivar
</div>

Puedes elegir hacerlo solo con css, pero entra el inconveniende de que es muy fácil deshabilitarlo con click derecho > "inspeccionar elemento" desde el navegador.

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.