div - ¿Cómo habilitar o deshabilitar un ancla usando jQuery?

smooth scroll bootstrap

Question

¿Cómo habilitar o deshabilitar un ancla usando jQuery?

Answer 1

Creo que una solución más agradable es establecer el atributo de datos deshabilitados y anclar una marca en el clic. De esta forma podemos desactivar temporalmente un ancla hasta que, por ejemplo, el javascript finalice con una llamada ajax o algunos cálculos. Si no lo desactivamos, podemos hacer clic rápidamente varias veces, lo cual es indeseable ...

$(''a'').live(''click'', function () {
var anchor = $(this);
if (anchor.data("disabled")) {
return false;
}
anchor.data("disabled", "disabled");
$.ajax({
url: url,
data: data,
cache: false,
success: function (json) {
// when it''s done, we enable the anchor again
anchor.removeData("disabled");
},
error: function () {
// there was an error, enable the anchor
anchor.removeData("disabled");
}
});
return false;
});

Hice un ejemplo jsfiddle: http://jsfiddle.net/wgZ59/76/

Answer 2

Desactiva o habilita cualquier elemento con la propiedad deshabilitada.

// Disable
$("#myAnchor").prop( "disabled", true );
// Enable
$( "#myAnchor" ).prop( "disabled", false );

Answer 3

Encontré una respuesta que me gusta mucho mejor here

Se ve como esto:

$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});

Habilitar implicaría configurar el atributo href

$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});

Esto le da la apariencia de que el elemento de anclaje se convierte en texto normal, y viceversa.

Answer 4

Entonces, con una combinación de las respuestas anteriores, se me ocurrió esto.

a.disabled { color: #555555; cursor: default; text-decoration: none; }
$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault();

Answer 5

Es tan simple como devolver falso;

ex.

jQuery("li a:eq(0)").click(function(){
return false;
})

o

jQuery("#menu a").click(function(){
return false;
})

Answer 6

La aplicación en la que estoy trabajando actualmente lo hace con un estilo CSS en combinación con javascript.

a.disabled { color:gray; }

Luego, cuando quiera deshabilitar un enlace, llamo

$(''thelink'').addClass(''disabled'');

Luego, en el controlador de clic para ''el enlace'' una etiqueta, siempre corro un cheque primero

if ($(''thelink'').hasClass(''disabled'')) return;

Answer 7

Nunca especificó realmente cómo los quería deshabilitados, o qué podría causar la deshabilitación.

En primer lugar, desea averiguar cómo establecer el valor como deshabilitado, para eso debe usar las Funciones de atributo de JQuery , y hacer que esa función suceda en un event , como un click , o la loading del documento.

Answer 8

Para situaciones en las que debe colocar texto o contenido html dentro de una etiqueta delimitadora, pero simplemente no desea que se realice ninguna acción cuando se hace clic en ese elemento (como cuando quiere que un enlace de paginador esté en estado desactivado porque es la página actual), simplemente corte el href. ;)

<a>3 (current page, I''m totally disabled!)</a>

La respuesta de @ michael-meadows me avisó de esto, pero él todavía se estaba ocupando de escenarios en los que todavía tienes que / estoy trabajando con jQuery / JS. En este caso, si tienes control sobre escribir el html, simplemente basta con que hagas la etiqueta href, ¡entonces la solución es una HTML pura!

Otras soluciones sin jQuery fingling que mantienen el href requieren que pongas un # en el href, pero eso hace que la página rebote hacia la parte superior, y solo quieres que quede completamente deshabilitada. O dejándolo vacío, pero dependiendo del navegador, eso todavía hace cosas como saltar a la cima, y, es HTML no válido según los IDEs. Pero aparentemente una etiqueta es un HTML totalmente válido sin un HREF.

Por último, podría decir: está bien, ¿por qué no solo arrojar la etiqueta a por completo? Debido a que a menudo no puede, la etiqueta a se usa con fines de estilo en el marco de CSS o el control que está usando, como el paginador de Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Answer 9

Prueba las siguientes líneas

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, incluso si deshabilitas <a> etiqueta href funcionará, por lo que debes eliminar href también.

Cuando quiera habilitar intente debajo de las líneas

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

Answer 10

Si intenta bloquear toda la interacción con la página, es posible que desee consultar el complemento jQuery BlockUI

Answer 11

Si no necesita que se comporte como una etiqueta ancla, preferiría reemplazarla en absoluto. Por ejemplo, si su etiqueta de anclaje es como

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

luego, usando jquery puede hacer esto cuando necesite mostrar texto en lugar de un enlace.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

De esta manera, simplemente podemos reemplazar la etiqueta ancla con una etiqueta div. Esto es mucho más fácil (solo 2 líneas) y semánticamente correcto también (porque no necesitamos un enlace ahora, por lo tanto, no debería tener un enlace)

Answer 12

La respuesta seleccionada no es buena.

Usar estilo CSS de eventos de puntero . (Como sugirió Rashad Annara)

Ver MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Es compatible con la mayoría de los navegadores.

El simple agregado de un atributo "deshabilitado" al ancla hará el trabajo si tienes una regla de CSS global como la siguiente:

a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}

Answer 13

Para evitar que un anclaje siga el href especificado, sugeriría usar preventDefault() :

// jQuery 1.7+
$(function () {
$(''a.something'').on("click", function (e) {
e.preventDefault();
});
});
// jQuery < 1.7
$(function () {
$(''a.something'').click(function (e) {
e.preventDefault();
});
// or
$(''a.something'').bind("click", function (e) {
e.preventDefault();
});
});

Ver:

preventDefault()

También vea esta pregunta previa sobre SO:

jQuery deshabilitar un enlace

Answer 14

$("a").click(function(){
alert(''disabled'');
return false;
});

Answer 15

$("a").click(function(event) {
event.preventDefault();
});

Si se llama a este método, la acción predeterminada del evento no se activará.

Answer 16

$(''#divID'').addClass(''disabledAnchor'');

En el archivo css

.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}