Estoy tratando de deshabilitar un botón con la clase disabled
, pero no lo deshabilita la versión de material es la v1.0.0.
<a class="col s6 left btn modal-trigger btn_my_ranking disabled" href="#modal_my_ranking">
Estoy tratando de deshabilitar un botón con la clase disabled
, pero no lo deshabilita la versión de material es la v1.0.0.
<a class="col s6 left btn modal-trigger btn_my_ranking disabled" href="#modal_my_ranking">
El atributo disabled solo funciona en elementos de tipo:
Pero no en elementos <a>
, si haz conseguido un efecto de des-habilitado mediante css/js comprueba que estés cargando los ficheros correspondientes, las versiones de compatibilidad y que no tengas errores en consola.
Puedes usar js para solucionar tu problema: Creas dos funciones (si quieres habilitar nuevamente) y simular el funcionamiento de un bloqueo.
<a id="disableable" href="#modal_my_ranking" onclick="disable(this.target)">
<script>
function disable(element){
element.dataset.dishref = element.href;
element.href = '#';
element.style="opacity:0.6; cursor: not-allowed;";
}
function enable(element){
element.href = element.dataset.dishref;
element.style="";
}
</script>
Lo más probable es que no hayas incluido el css correcto ya que a mí me funciona muy bien en Chrome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" integrity="sha256-OweaP/Ic6rsV+lysfyS4h+LM6sRwuO3euTYfr6M124g=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha256-U/cHDMTIHCeMcvehBv1xQ052bPSbJtbuiw4QA9cTKz0=" crossorigin="anonymous"></script>
<a class="col s6 left btn modal-trigger btn_my_ranking disabled" href="#modal_my_ranking">disabled</a>
<a class="col s6 left btn modal-trigger btn_my_ranking" href="#">enabled</a>