Comment activer ou désactiver une ancre à l'aide de jQuery?
Comment activer ou désactiver une ancre à l'aide de jQuery?
Pour empêcher une ancre de suivre la href spécifiée, je suggérerais d'utiliser 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();
});
});
Voir:
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
Voir aussi cette question précédente sur SO:
L'application sur laquelle je travaille actuellement le fait avec un style CSS en combinaison avec javascript.
a.disabled { color:gray; }
Puis chaque fois que je veux désactiver un lien que j'appelle
$('thelink').addClass('disabled');
Ensuite, dans le gestionnaire de clics pour "thelink" une balise, je lance toujours un contrôle en premier lieu
if ($('thelink').hasClass('disabled')) return;
J'ai trouvé une réponse que j'aime beaucoup mieux ici
Ressemble à ça:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
Activer impliquerait la définition de l'attribut href
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Cela vous donne l’impression que l’élément d’ancrage devient un texte normal, et inversement.
$("a").click(function(){
alert('disabled');
return false;
});
Je pense qu'une solution plus agréable consiste à définir l'attribut de données désactivé sur et d'ancrer une vérification de ce dernier au clic. De cette façon, nous pouvons désactiver temporairement une ancre jusqu'à ce que, par exemple, le javascript est terminé avec un appel ajax ou des calculs. Si nous ne le désactivons pas, nous pouvons rapidement cliquer plusieurs fois dessus, ce qui n'est pas souhaitable ...
$('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;
});
J'ai fait un exemple jsfiddle: http://jsfiddle.net/wgZ59/76/
C'est aussi simple que de retourner faux.
ex.
jQuery("li a:eq(0)").click(function(){
return false;
})
ou
jQuery("#menu a").click(function(){
return false;
})
La réponse choisie n'est pas bonne.
Utilisez le style CSS pointer-events. (Comme Rashad Annara a suggéré)
Voir MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Il est supporté par la plupart des navigateurs.
Ajouter simplement l'attribut "disabled" à l'ancre fera l'affaire si vous avez une règle CSS globale comme celle-ci:
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
Essayez les lignes ci-dessous
$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");
Coz, Même si vous désactivez la balise <a>, la variable href fonctionne, vous devez donc également supprimer la variable href.
Quand vous voulez activer essayez sous les lignes
$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
$('#divID').addClass('disabledAnchor');
En fichier css
.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}
$("a").click(function(event) {
event.preventDefault();
});
Si cette méthode est appelée, l'action par défaut de l'événement ne sera pas déclenchée.
Si vous essayez de bloquer toute interaction avec la page, vous voudrez peut-être consulter le plugin jQuery BlockUI
Vous n'avez jamais vraiment précisé comment vous les vouliez désactivés, ou ce qui provoquerait la désactivation.
Tout d'abord, vous voulez savoir comment définir la valeur sur disabled, pour cela vous utiliseriez fonctions d'attribut de JQuery et que cette fonction se produise sur un événement , comme un cliquez ou le chargement du document.
Donc, avec une combinaison des réponses ci-dessus, je suis venu avec cela.
a.disabled { color: #555555; cursor: default; text-decoration: none; }
$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault();
Pour les situations dans lesquelles vous devez insérer du texte ou du contenu HTML dans une balise d'ancrage, mais vous ne voulez absolument pas que des actions soient effectuées du tout lorsque vous cliquez sur cet élément (comme lorsque vous souhaitez qu'un lien de pagination soit à l'état désactivé, car la page en cours), il suffit de couper le href. ;)
<a>3 (current page, I'm totally disabled!)</a>
La réponse de @ michael-meadows m'a renseigné, mais son propos concernait toujours les scénarios dans lesquels vous devez encore/travaillez avec jQuery/JS. Dans ce cas, si vous avez le contrôle sur l'écriture du code html lui-même, il vous suffit de cocher la balise href pour créer une solution HTML pure!
D'autres solutions sans finage jQuery qui gardent le href nécessitent de placer un # dans le href, mais cela provoque le rebond de la page vers le haut, et vous voulez juste que ce soit tout simplement désuet. Ou laissez-le vide, mais selon le navigateur, cela fait toujours des choses comme aller au sommet, et c'est du HTML invalide selon les IDE. Mais apparemment, une balise a est du code HTML totalement valide sans HREF.
Enfin, vous pourriez dire: d'accord, pourquoi ne pas simplement vider le tag complètement? Comme vous ne le pouvez souvent pas, la balise a est utilisée à des fins de style dans le framework CSS ou le contrôle que vous utilisez, comme le paginateur de Bootstrap:
http://Twitter.github.io/bootstrap/components.html#pagination
Désactiver ou activer n'importe quel élément avec la propriété disabled.
// Disable
$("#myAnchor").prop( "disabled", true );
// Enable
$( "#myAnchor" ).prop( "disabled", false );
Si vous n'en avez pas besoin pour vous comporter comme une balise d'ancrage, je préférerais la remplacer. Par exemple Si votre balise d'ancrage est comme
<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>
puis, en utilisant jquery, vous pouvez le faire lorsque vous devez afficher du texte au lieu d’un lien.
var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")
Donc, de cette façon, nous pouvons simplement remplacer la balise d'ancrage par une balise div. C’est beaucoup plus facile (à peine 2 lignes) et sémantiquement correct (car nous n’avons pas besoin d’un lien maintenant, nous ne devrions donc pas en avoir)