Tag href disabilitato

Sebbene quel link sia disabilitato, è comunque cliccabile.

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

Posso renderlo non cliccabile se è disabilitato? Dovrei usare JavaScript necessariamente?

Non esiste alcun attributo disabilitato per i collegamenti ipertestuali. Se non desideri che qualcosa sia collegato, dovrai rimuovere del <a>tutto il tag o rimuoverne l' hrefattributo.

Con l'aiuto di CSS disabiliterete il collegamento ipertestuale. Prova il seguito

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

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

Puoi usare:

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

Puoi usare una di queste soluzioni:

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>

Prova questo:

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

Il <a>tag non ha un disabledattributo, è solo per <input>s (e <select>s e <textarea>s).

Per "disabilitare" un collegamento, è possibile rimuovere il suo hrefattributo o aggiungere un gestore di clic che restituisce false.

È necessario rimuovere il <a>tag per sbarazzarsi di questo.

o prova a usare: -

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

Suggerimenti 1: utilizzo dei CSS pointer-events: none;

Suggerimenti 2: utilizzo di JavaScript javascript:void(0) (questa è una procedura consigliata)

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

Suggerimenti 1: utilizzo di Jquery $('selector').attr("disabled","disabled");

Solo CSS: questo rimuove il collegamento da href.

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

Lasciando che un genitore abbia pointer-events: nonedisabiliterà il figlio in a-tagquesto modo (richiede che il div copra la a e non abbia 0 larghezza / altezza):

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

dove:

.disabled {
    pointer-events: none;
}

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

puoi disabilitare il link usando javascript in fase di esecuzione usando questo codice

$ ('. page-link'). css ("pointer-events", "none");

Se vuoi sbarazzarti del puntatore puoi farlo con css usando il cursore .

È possibile emulare l'attributo disabilitato su un <a>tag.

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

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

Nel mio caso, io uso

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

Ne ho una:

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

Spero che ti possa aiutare;)

Non possiamo disabilitarlo direttamente ma possiamo fare quanto segue

1. aggiungi type="button".
2. rimuovere l' href=""attributo.
3. aggiungi l' disabledattributo in modo che mostri che è disabilitato cambiando il cursore e diventa oscurato.

di seguito è riportato un esempio

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

Sono stato in grado di ottenere il risultato desiderato usando un'operazione ng-href ternary

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

dove

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

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

Utilizzare i pulsanti e i collegamenti correttamente.

• I pulsanti attivano la funzionalità con script in una pagina Web (finestre di dialogo, aree di espansione / compressione).

• I collegamenti conducono a un'altra posizione, a una pagina diversa o a una posizione diversa nella stessa pagina.

Se segui queste regole non ci saranno scenari in cui devi disabilitare un collegamento. Anche se fai apparire un link visivamente disabilitato e fai clic vuoto

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

Non considererai l'accessibilità e gli screen reader lo leggeranno come un link e le persone ipovedenti continueranno a chiedersi perché il link non funziona.

Se stai usando WordPress, ho creato un plugin che può fare questo e molto altro senza la necessità di sapere come codificare nulla. Tutto quello che devi fare è aggiungere il selettore dei collegamenti che vuoi disabilitare e quindi scegliere "Disabilita tutti i collegamenti con questo selettore in una nuova scheda". dal menu a discesa che appare e fai clic su aggiorna.

Fai clic qui per visualizzare una gif che lo dimostra

Puoi ottenere la versione gratuita dal repository dei plugin di WordPress.org per provarlo.

Ecco vari modi per disabilitare il tag 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

Poiché non ci sono attributi disabilitati per il tag anchor. Se si desidera interrompere il comportamento dei tag di ancoraggio all'interno di una funzione jQuery, è possibile utilizzare la riga seguente all'inizio della funzione:

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

event.preventDefault ()

Vedo che ci sono già un sacco di risposte pubblicate qui, ma non credo che ce ne sia ancora una chiara che combini gli approcci già menzionati in quello che ho trovato a lavorare. Questo per far apparire entrambi i collegamenti disabilitati e non reindirizzare l'utente su un'altra pagina.

Questa risposta presuppone che tu stia utilizzando jquery e bootstrap e utilizza un'altra proprietà per archiviare temporaneamente la hrefproprietà mentre è disabilitata.

//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;
}

Qualsiasi cosa nel tag href verrà visualizzata nella parte inferiore sinistra della finestra del browser quando ci si passa sopra con il mouse.

Personalmente penso che avere qualcosa come javascript: void (0) visualizzato per l'utente sia orribile.

Invece, lascia href off, fai la tua magia con jQuery / qualunque altra cosa e aggiungi una regola di stile (se hai ancora bisogno che appaia come un link):

a {
    cursor:pointer;
}

La migliore risposta è sempre la più semplice. Non c'è bisogno di alcuna codifica.

Se il tag di ancoraggio (a) non ha alcun attributo href, è solo un segnaposto per un collegamento ipertestuale. Supportato da tutti i browser!

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

È possibile disabilitare i tag di ancoraggio restituendo false. Nel mio caso sto usando angolare e ng-disabled per una fisarmonica Jquery e ho bisogno di disabilitare le sezioni.

Quindi ho creato un piccolo frammento di js per risolvere questo problema.

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

se vuoi solo disabilitare temporaneamente il link ma lasciare l'href lì per abilitare in seguito (che è quello che volevo fare) ho scoperto che tutti i browser usano il primo href. Quindi sono stato in grado di fare:

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

Variante adatta a me:

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

Solo aggiungendo: questo funziona in generale, tuttavia non funzionerà se l'utente ha disabilitato javascript nel browser.

1) È possibile utilizzare facoltativamente la classe Bootstrap 3 sul tag anchor per disabilitare il tag href, dopo aver integrato il plug-in bootstrap 3 do

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

O

2) Scopri come abilitare JavaScript utilizzando html o js nei browser. o creare un popup che indichi all'utente di abilitare javascript prima di utilizzare il sito Web