jquery - align - select menu
jQuery deshabilitar un enlace (16)
Alguien sabe cómo deshabilitar un enlace en jQuery SIN usar return false;
?
Específicamente, lo que estoy tratando de hacer es deshabilitar el enlace de un elemento, hacer un clic en él usando jquery que activa algunas cosas, y luego volver a habilitar ese enlace para que, si se vuelve a hacer clic, funcione como predeterminado.
Gracias. Dave
ACTUALIZACIÓN Aquí está el código. Lo que debe hacer después de que se haya aplicado la clase .expanded
es volver a habilitar el enlace deshabilitado.
$(''ul li'').click(function(e) {
e.preventDefault();
$(''ul'').addClass(''expanded'');
$(''ul.expanded'').fadeIn(300);
//return false;
});
Aquí hay una solución alternativa de css / jQuery que prefiero por su terseness y minimización de scripts:
css:
a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
jQuery:
$(''.disableAfterClick'').click(function (e) {
$(this).addClass(''disabled'');
});
Deberías encontrar tu respuesta here .
Gracias a @Will y @Matt por esta elegante solución.
jQuery(''#path .to .your a'').each(function(){
var $t = jQuery(this);
$t.after($t.text());
$t.remove();
});
Ejemplo de enlace html:
<!-- boostrap button + fontawesome icon -->
<a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
<i class="icon-file-text icon-large"></i>
Download Document
</a>
usa esto en jQuery
$(''#BT_Download'').attr(''disabled'',true);
agrega esto a css:
a[disabled="disabled"] {
pointer-events: none;
}
Esto funciona para los enlaces que tienen el atributo onclick establecido en línea. Esto también le permite eliminar más tarde el "retorno falso" para habilitarlo.
//disable all links matching class
$(''.yourLinkClass'').each(function(index) {
var link = $(this);
var OnClickValue = link.attr("onclick");
link.attr("onclick", "return false; " + OnClickValue);
});
//enable all edit links
$(''.yourLinkClass'').each(function (index) {
var link = $(this);
var OnClickValue = link.attr("onclick");
link.attr("onclick", OnClickValue.replace("return false; ", ""));
});
Mi favorito en "checkout para editar un elemento y evitar que el -wild wild west haga clic en cualquier lugar- mientras está en un checkout" funciona
$(''a'').click(function(e) {
var = $(this).attr(''disabled'');
if (var === ''disabled'') {
e.preventDefault();
}
});
Así que si quiero que todos los enlaces externos en una segunda barra de herramientas de acción se deshabiliten mientras se está en el "modo de edición" como se describe anteriormente, agregaré la función de edición
$(''#actionToolbar .external'').attr(''disabled'', true);
Ejemplo de enlace después del incendio:
<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>
Y ahora puedes usar la propiedad deshabilitada para los enlaces.
¡Aclamaciones!
Para otros que vinieron aquí a través de google como yo, aquí hay otro enfoque:
css:
.disabled {
color: grey; // ...whatever
}
jQuery:
$(''#myLink'').click(function (e) {
e.preventDefault();
if ($(this).hasClass(''disabled''))
return false; // Do something else in here if required
else
window.location.href = $(this).attr(''href'');
});
// Elsewhere in your code
if (disabledCondition == true)
$(''#myLink'').addClass(''disabled'')
else
$(''#myLink'').removeClass(''disabled'')
Recuerda: no solo esta es una clase css
class = "buttonstyle"
pero también estos dos
class = "buttonstyle desactivado"
para que pueda agregar y eliminar más clases fácilmente con jQuery. No hay necesidad de tocar href ...
¡Me encanta jQuery! ;-)
Prueba esto:
$("a").removeAttr(''href'');
EDITAR-
De su código actualizado:
var location= $(''#link1'').attr("href");
$("#link1").removeAttr(''href'');
$(''ul'').addClass(''expanded'');
$(''ul.expanded'').fadeIn(300);
$("#link1").attr("href", location);
Puede eliminar clic para enlace siguiendo:
$(''#link-id'').unbind(''click'');
Puede volver a habilitar el enlace por lo siguiente,
$(''#link-id'').bind(''click'');
No se puede utilizar la propiedad ''deshabilitada'' para enlaces.
Puedes simplemente ocultar y mostrar el enlace como quieras.
$(link).hide();
$(link).show();
Sé que esto no es con jQuery pero puedes deshabilitar un enlace con algunos css simples:
a[disabled] {
z-index: -1;
}
el HTML se vería como
<a disabled="disabled" href="/start">Take Survey</a>
Si vas por la ruta href, puedes guardarlo.
Deshabilitar:
$(''a'').each(function(){
$(this).data("href", $(this).attr("href")).removeAttr("href");
});
Luego vuelva a habilitar usando:
$(''a'').each(function(){
$(this).attr("href", $(this).data("href"));
});
En un caso tuve que hacerlo de esta manera porque los eventos de clic ya estaban vinculados en otro lugar y no tenía control sobre ellos.
Siempre uso esto en jQuery para deshabilitar enlaces
$("form a").attr("disabled","disabled");
Simplemente use $("a").prop("disabled", true);
. Esto realmente deshabilitará el elemento de enlace. Necesita ser prop("disabled", true)
. No use attr("disabled", true)
Solo activa cosas, establece alguna bandera, devuelve falso. Si la bandera está activada, no haga nada.
unbind()
fue desaprobado en jQuery 3
, usa el método off()
lugar:
$("a").off("click");
$(''#myLink'').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
Eso evitará el comportamiento predeterminado de un hipervínculo, que es visitar el href especificado.
Desde el tutorial jQuery:
Para hacer clic y la mayoría de los demás eventos, puede evitar el comportamiento predeterminado, aquí, siguiendo el enlace a jquery.com, llamando a event.preventDefault () en el controlador de eventos
Si desea preventDefault()
solo si se cumple una determinada condición (por ejemplo, algo está oculto), puede probar la visibilidad de su ul con la clase expandida . Si es visible (es decir, no está oculto), el enlace debería activarse normalmente, ya que la instrucción if no se ingresará y, por lo tanto, el comportamiento predeterminado no se evitará:
$(''ul li'').click(function(e) {
if($(''ul.expanded'').is('':hidden'')) {
e.preventDefault();
$(''ul'').addClass(''expanded'');
$(''ul.expanded'').fadeIn(300);
}
});