Balise href désactivée

Bien que ce lien soit désactivé, il est toujours cliquable.

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

Puis-je le rendre non cliquable s'il est désactivé? Dois-je nécessairement utiliser JavaScript?

Il n'y a pas d'attribut désactivé pour les hyperliens. Si vous ne voulez pas que quelque chose soit lié, vous devrez supprimer <a>complètement la balise ou supprimer son hrefattribut.

Avec l'aide de css, vous désactivez l'hyperlien. Essayez ce qui suit

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

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

Vous pouvez utiliser:

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

Vous pouvez utiliser l'une de ces solutions:

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>

Essaye ça:

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

La <a>balise n'a pas d' disabledattribut, c'est juste pour <input>s (et <select>s et <textarea>s).

Pour "désactiver" un lien, vous pouvez supprimer son hrefattribut ou ajouter un gestionnaire de clics qui renvoie false.

Vous devez supprimer la <a>balise pour vous en débarrasser.

ou essayez d'utiliser: -

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

HTML:

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

CSS:

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

Conseils 1: utilisation de CSS pointer-events: none;

Conseils 2: utilisation de JavaScript javascript:void(0) (il s'agit d'une meilleure pratique)

<a href="javascript:void(0)"></a>

Conseils 1: Utilisation de Jquery $('selector').attr("disabled","disabled");

CSS uniquement: cela supprime le lien du href.

.disable { 
    pointer-events: none; 
    cursor: default; 
}

Laisser un parent pointer-events: nonedésactivera l'enfant a-tagcomme ceci (nécessite que le div couvre le a et n'ait pas 0 largeur / hauteur):

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

où:

.disabled {
    pointer-events: none;
}

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

vous pouvez désactiver le lien en utilisant javascript au moment de l'exécution en utilisant ce code

$ ('. page-link'). css ("pointeur-événements", "aucun");

Si vous voulez vous débarrasser du pointeur, vous pouvez le faire avec css en utilisant le curseur .

Vous pouvez émuler l'attribut désactivé sur une <a>balise.

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

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

Dans mon cas, j'utilise

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

J'en ai un:

<a href="#">This is a disabled tag.</a>

J'espère que cela vous aidera;)

Nous ne pouvons pas le désactiver directement, mais nous pouvons effectuer les opérations suivantes

1. ajouter type="button".
2. supprimez l' href=""attribut.
3. ajouter un disabledattribut pour montrer qu'il est désactivé en changeant le coursier et qu'il devient grisé.

voici un exemple

<?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    
}
?>

J'ai pu atteindre le résultat souhaité en utilisant une opération ternaire ng-href

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

où

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

Utilisez correctement les boutons et les liens.

• Les boutons activent la fonctionnalité de script sur une page Web (boîtes de dialogue, développer / réduire les régions).

• Les liens vous amènent vers un autre emplacement, soit vers une page différente ou un emplacement différent sur la même page.

Si vous suivez ces règles, il n'y aura aucun scénario lorsque vous devrez désactiver un lien. Même si vous faites apparaître un lien visuellement désactivé et vide onclick

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

Vous ne considérerez pas l'accessibilité et les lecteurs d'écran le liront comme un lien et les personnes malvoyantes continueront de se demander pourquoi le lien ne fonctionne pas.

Si vous utilisez WordPress, j'ai créé un plugin qui peut faire cela et bien plus sans avoir besoin de savoir quoi coder. Tout ce que vous devez faire est d'ajouter le sélecteur du ou des liens que vous souhaitez désactiver, puis choisissez «Désactiver tous les liens avec ce sélecteur dans un nouvel onglet». dans le menu déroulant qui apparaît et cliquez sur Mettre à jour.

Cliquez ici pour voir un gif qui illustre cela

Vous pouvez obtenir la version gratuite du référentiel de plugins WordPress.org pour l'essayer.

Voici différentes façons de désactiver la balise a:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

Comme il n'y a pas d'attributs désactivés pour la balise d'ancrage. Si vous souhaitez arrêter le comportement des balises d'ancrage dans une fonction jQuery, vous pouvez utiliser la ligne ci-dessous au début de la fonction:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

Je vois qu'il y a déjà une tonne de réponses postées ici, mais je ne pense pas qu'il y ait encore de réponse claire qui combine les approches déjà mentionnées dans celle que j'ai trouvée fonctionner. Cela permet de rendre le lien désactivé et de ne pas rediriger l'utilisateur vers une autre page.

Cette réponse suppose que vous utilisez jquery et bootstrap et utilise une autre propriété pour stocker temporairement la hrefpropriété lorsqu'elle est désactivée.

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

Tout ce qui se trouve dans la balise href s'affiche en bas à gauche de la fenêtre du navigateur lorsque vous la survolez avec la souris.

Personnellement, je pense qu'avoir quelque chose comme javascript: void (0) affiché pour l'utilisateur est hideux.

Au lieu de cela, laissez href désactivé, faites votre magie avec jQuery / quoi que ce soit d'autre et ajoutez une règle de style (si vous en avez toujours besoin pour ressembler à un lien):

a {
    cursor:pointer;
}

La meilleure réponse est toujours la plus simple. Pas besoin de codage.

Si la balise d'ancrage (a) n'a pas d'attribut href, il s'agit uniquement d'un espace réservé pour un lien hypertexte. Pris en charge par tous les navigateurs!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

Vous pouvez désactiver les balises d'ancrage en renvoyant false. Dans mon cas, j'utilise angulaire et ng-désactivé pour un accordéon Jquery et je dois désactiver les sections.

J'ai donc créé un petit extrait js pour résoudre ce problème.

       <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>

si vous voulez juste désactiver temporairement le lien mais laisser le href pour l'activer plus tard (c'est ce que je voulais faire), j'ai trouvé que tous les navigateurs utilisent le premier href. J'ai donc pu faire:

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

Variante qui me convient:

<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>

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

Ajout: cela fonctionne en général, mais cela ne fonctionnera pas si l'utilisateur a désactivé javascript dans le navigateur.

1) Vous pouvez éventuellement utiliser la classe Bootstrap 3 sur votre balise d'ancrage pour désactiver la balise href, après avoir intégré le plugin bootstrap 3

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

Ou

2) Apprenez à activer javascript en utilisant html ou js dans les navigateurs. ou créez un pop-up indiquant à l'utilisateur d'activer le javascript avant d'utiliser le site Web