Etiqueta href deshabilitada

Aunque ese enlace está desactivado, aún se puede hacer clic en él.

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

¿Puedo hacer que no se pueda hacer clic si está deshabilitado? ¿Debo usar JavaScript necesariamente?

No hay atributo deshabilitado para hipervínculos. Si no desea que algo esté vinculado, deberá eliminar la <a>etiqueta por completo o eliminar su hrefatributo.

Con la ayuda de CSS, deshabilitará el hipervínculo. Prueba lo siguiente

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

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

Puedes usar:

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

Puede usar una de estas soluciones:

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>

Prueba esto:

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

La <a>etiqueta no tiene un disabledatributo, eso es solo para <input>s ( <select>ys y <textarea>s).

Para "deshabilitar" un enlace, puede eliminar su hrefatributo o agregar un controlador de clics que devuelva falso.

Debe eliminar la <a>etiqueta para deshacerse de esto.

o intente usar: -

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

Consejos 1: uso de CSS pointer-events: none;

Consejos 2: Uso de JavaScript javascript:void(0) (esta es una práctica recomendada)

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

Consejos 1: Usando Jquery $('selector').attr("disabled","disabled");

Solo CSS: esto elimina el enlace de href.

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

Dejar que un padre tenga pointer-events: nonedeshabilitará al niño de a-tagesta manera (requiere que el div cubra el a y no tenga 0 ancho / alto):

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

dónde:

.disabled {
    pointer-events: none;
}

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

puedes deshabilitar el enlace usando javascript en tiempo de ejecución usando este código

$ ('. page-link'). css ("eventos de puntero", "ninguno");

Si desea deshacerse del puntero, puede hacerlo con CSS usando el cursor .

Puede emular el atributo deshabilitado en una <a>etiqueta.

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

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

En mi caso, yo uso

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

Tengo uno:

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

Espero que te ayude ;)

No podemos desactivarlo directamente, pero podemos hacer lo siguiente

1. agregar type="button".
2. eliminar el href=""atributo
3. agregue el disabledatributo para que muestre que está deshabilitado al cambiar el curso y se atenúa.

el siguiente es un ejemplo

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

Pude lograr el resultado deseado usando una operación ng-href ternary

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

dónde

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

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

Use botones y enlaces correctamente.

• Los botones activan la funcionalidad programada en una página web (cuadros de diálogo, regiones expandidas / contraídas).

• Los enlaces lo llevan a otra ubicación, ya sea a una página diferente o a una ubicación diferente en la misma página.

Si sigue estas reglas, no habrá ningún escenario cuando necesite deshabilitar un enlace. Incluso si hace que un enlace se vea visualmente deshabilitado y en blanco al hacer clic

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

No considerará la accesibilidad y los lectores de pantalla lo leerán como un enlace y las personas con discapacidad visual seguirán preguntándose por qué el enlace no funciona.

Si está utilizando WordPress, creé un complemento que puede hacer esto y mucho más sin necesidad de saber cómo codificar nada. Todo lo que necesita hacer es agregar el selector de los enlaces que desea deshabilitar y luego elegir "Deshabilitar todos los enlaces con este selector en una nueva pestaña". desde el menú desplegable que aparece y haga clic en actualizar.

Haga clic aquí para ver un gif que demuestra esto

Puede obtener la versión gratuita del repositorio de plugins de WordPress.org para probarla.

Aquí hay varias formas de deshabilitar la etiqueta 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

Como no hay atributos deshabilitados para la etiqueta de anclaje. Si desea detener el comportamiento de la etiqueta de anclaje dentro de una función jQuery, puede usar la línea siguiente al comienzo de la función:

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

event.preventDefault ()

Veo que ya hay un montón de respuestas publicadas aquí, pero no creo que haya ninguna clara todavía que combine los enfoques ya mencionados en el que he encontrado que funciona. Esto es para que el enlace parezca deshabilitado y no redirigir al usuario a otra página.

Esta respuesta asume que está utilizando jquery y bootstrap , y usa otra propiedad para almacenar temporalmente la hrefpropiedad mientras está deshabilitada.

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

Cualquier cosa en la etiqueta href se mostrará en la esquina inferior izquierda de la ventana del navegador cuando pase el mouse sobre ella.

Personalmente, creo que tener algo como javascript: void (0) muestra al usuario es horrible.

En cambio, deje href apagado, haga su magia con jQuery / lo que sea y agregue una regla de estilo (si aún necesita que parezca un enlace):

a {
    cursor:pointer;
}

La mejor respuesta es siempre la más simple. No hay necesidad de ninguna codificación.

Si la etiqueta de anclaje (a) no tiene atributo href, solo es un marcador de posición para un hipervínculo. ¡Compatible con todos los navegadores!

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

Puede deshabilitar las etiquetas de anclaje devolviendo falso. En mi caso, estoy usando angular y ng-disabled para un acordeón Jquery y necesito desactivar las secciones.

Así que creé un pequeño fragmento de js para arreglar esto.

       <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 solo desea deshabilitar temporalmente el enlace pero dejar el href allí para habilitarlo más tarde (que es lo que quería hacer), descubrí que todos los navegadores usan el primer href. Por lo tanto pude hacer:

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

Variante que me conviene:

<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 agregando: Esto funciona en general, sin embargo, no funcionará si el usuario ha deshabilitado JavaScript en el navegador.

1) Opcionalmente, puede usar la clase Bootstrap 3 en su etiqueta de anclaje para deshabilitar la etiqueta href, después de integrar el complemento bootstrap 3 do

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

O

2) Aprenda cómo habilitar javascript usando html o js en los navegadores. o cree un usuario emergente que le permita habilitar javascript antes de usar el sitio web