javascript - example - Etiqueta href deshabilitada

javascript html ejemplos

Question

Aunque ese enlace está desactivado, aún se puede hacer clic en él.

<a href="/" disabled="disabled">123n</a>

¿Puedo hacer que no se pueda hacer clic si está deshabilitado? ¿Debo usar JavaScript necesariamente?

Answer 1

Con la ayuda de CSS, desactivará el hipervínculo. Prueba el siguiente

<a href="link.html" class="disabled">Link</a>
a.disabled {
pointer-events: none;
cursor: default;
}

Answer 2

Cualquier cosa en la etiqueta href aparecerá en la esquina inferior izquierda de la ventana del navegador cuando pases el mouse sobre ella.

Personalmente creo que tener algo como javascript: void (0) que se muestra al usuario es espantoso.

En su lugar, deje href apagado, haga su magia con jQuery / lo que sea y agregue una regla de estilo (si todavía necesita que se vea como un enlace):

a {
cursor:pointer;
}

Answer 3

Debes eliminar la etiqueta <a> para deshacerte de esto.

o intenta usar: -

 <a href="/" onclick="return false;">123n</a>

Answer 4

Dejar que un padre tenga pointer-events: none deshabilitará la a-tag niño como esta (requiere que el div cubra la a y no tenga 0 de ancho / alto):

<div class="disabled">
<a href="/"></a>
</div>

dónde:

.disabled {
pointer-events: none;
}

Answer 5

En mi caso, yo uso

<a href="/" onClick={e => e.preventDefault()}>

Answer 6

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}

Answer 7

La etiqueta <a> no tiene un atributo disabled , eso es solo para <input> s (y <select> sy <textarea> s).

Para "deshabilitar" un enlace, puede eliminar su atributo href o agregar un controlador de clic que devuelve falso.

Answer 8

No hay un atributo desactivado para hipervínculos. Si no desea que se vincule algo, deberá eliminar la etiqueta <a> completo.

PD.

Eliminar el atributo href es suficiente.

Answer 9

No podemos deshabilitarlo directamente, pero podemos hacer lo siguiente

1. agregar type="button" .
2. elimine el atributo href="" .
3. agrega el atributo disabled para que se muestre desactivado al cambiar el curso y se atenúa.

siguiente es un ejemplo

<?php
if($status=="Approved"){
?>
<a type="button" class="btn btn-primary btn-xs" disabled> EDIT
</a>
<?php
}else{
?>
<a href="index.php" class="btn btn-primary btn-xs"> EDIT
</a>
<?php
}
?>

Answer 10

Prueba esto:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

Answer 11

Puede deshabilitar el enlace usando javascript en tiempo de ejecución usando este código

$ (''. page-link''). css ("puntero-eventos", "ninguno");

Answer 12

Puede deshabilitar las etiquetas de anclaje al devolver falso. En mi caso estoy usando angular y ng-disabled para un acordeón Jquery y necesito deshabilitar las secciones.

Así que creé un pequeño fragmento de js para arreglar esto.

 <a class="opener" data-toggle="collapse"
data-parent="#shipping-detail"
id="shipping-detail-section"
href="#shipping-address"
aria-expanded="true"
ng-disabled="checkoutState.addressSec">
Shipping Address</a>
<script>
$("a.opener").on("click", function () {
var disabled = $(this).attr("disabled");
if (disabled === ''disabled'') {
return false;
}
});
</script>

Answer 13

Puede emular el atributo deshabilitado en una etiqueta <a> .

<a href="link.html" disabled="">Link</a>

a[disabled] {
pointer-events: none;
cursor: default;
}

Answer 14

Puedes usar una de estas soluciones:

HTML

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
</style>

Answer 15

Puedes usar:

<a href="/" onclick="return false;">123n</a>

Answer 16

Si quiere deshacerse del puntero, puede hacerlo con css usando el cursor .

Answer 17

Use botones y enlaces correctamente.

• Los botones activan la funcionalidad con guiones en una página web (cuadros de diálogo, expandir / colapsar regiones).

• Los enlaces lo llevan a otra ubicación, ya sea a una página diferente o a una ubicación diferente en la misma página.

Si sigues estas reglas, no habrá ningún escenario cuando necesites inhabilitar un enlace. Incluso si hace que un enlace se vea visualmente deshabilitado y en blanco haga clic en

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

No considerará la accesibilidad y los lectores de pantalla lo leerán como un enlace y las personas con discapacidad visual seguirán preguntándose por qué el enlace no funciona.

Answer 18

si solo desea deshabilitar temporalmente el enlace, pero deje el href allí para habilitarlo más tarde (que es lo que quería hacer), descubrí que todos los navegadores usan el primer href. Por lo tanto, pude hacer:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

Answer 19

Variante que me conviene:

<script>
function locker(){
if ($("a").hasClass("locked")) {
$("a").removeClass(''locked'').addClass(''unlocked'');
$("a").attr("onClick","return false");
} else {
$("a").css("onclick","true");
$("a").removeClass(''unlocked'').addClass(''locked'');
$("a").attr("onClick","");
}
}
</script>
<button onclick="locker()">unlock</button>
<a href="http://some.site.com" class="locked">
<div>
....
<div>
</a>

Answer 20

<a href="/" disabled="true" onclick="return false">123</a>

Solo agregando: Esto funciona en general, sin embargo, no funcionará si el usuario ha desactivado javascript en el navegador.

1) Opcionalmente, puede usar la clase Bootstrap 3 en su etiqueta de anclaje para desactivar la etiqueta href, luego de integrar el complemento bootstrap 3.

<a href="/" class="btn btn-primary disabled">123n</a>

O

2) Aprende cómo habilitar javascript usando html o js en los navegadores. o crea un usuario emergente para habilitar el uso de javascript antes de usar el sitio web

Answer 21

$(document).ready(function() {
$(''a'').click(function(e) {
e.preventDefault();
});
});