Bom esto montando um botão personalizado com css. Preciso manter ele bloqueado por 2 segundos após o primeiro clique, porém não esta funcionado. Ao clicar eu mudo o texto para um ícone, e depois de 2 segundos o texto tem que voltar e o botão tem que ser liberado para o clique.
Alguém sabe o que estou fazendo errado?
$(document).ready(function () {
$("button").click(function () {
$(this).html("<i class='material-icons animate-spin'>autorenew</i>");
// Desabilita o botao
$(this).disabled = true;
// Habilita novamente após dois segundos (2000) ms
setTimeout(function () {
toggleDisabled($(this));
}, 2000);
function toggleDisabled(elem) {
elem.disabled = !elem.disabled;
}
});
});
.bt {
transition: all .3s ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
border:0;
padding:10px;
width:200px;
height: 50px;
display: inline-block;
margin: 10px;
cursor: pointer;
border-radius: 4px;
background-color: #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class='bt' type='submit'>OK</button>