link - Html- ¿cómo desactivar<a href>?

href css

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuál es la forma más fácil de activar / desactivar botones y enlaces (jQuery + Bootstrap) 15 respuestas

Creé un botón que abre una ventana modal al hacer clic.

<a href="#"  data-toggle="modal" data-target="#myModal" class="signup-button gray-btn pl-pr-36" id="connectBtn"  data-role="disabled">Connect</a>

Por alguna razón, el data-role="disabled" no funciona bien. ¿Cómo puedo desactivarlo?

Answer 1

Creé un botón ...

Aquí es donde te has equivocado. No ha creado un botón, ha creado un elemento de anclaje. Si hubiera usado un elemento de button lugar, no tendría este problema:

<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
    Connect
</button>

Si va a continuar usando un elemento a, en su lugar, debe darle un atributo de role establecido en "button" y soltar el atributo href completo:

<a role="button" ...>

Una vez que hayas hecho eso, puedes introducir un fragmento de JavaScript que llame a event.preventDefault() - aquí con el event como tu clic.

Answer 2

Puede usar CSS para lograr esto:

<style>
    .disabled {
        pointer-events: none;
        cursor: default;
    }
</style>

<a href="somelink.html" class="disabled">Some link</a>

Ejemplo: http://jsfiddle.net/7EQJp/

O puede usar JavaScript para evitar la acción predeterminada como esta:

$(''.disabled'').click(function(e){
    e.preventDefault();
})

Answer 3

<script>
    $(document).ready(function(){
        $(''#connectBtn'').click(function(e){
            e.preventDefault();
        })
    });
</script>

Esto evitará la acción predeterminada.

Answer 4

.disabledLink.disabled {pointer-events:none;}

¡Eso debería hacerlo, espero haber ayudado!