Veurem com desactivar un botó d’un formulari web durant X segons amb la llibreria jQuery.
Codi Html
Comencem amb el codi que crea el botó a la nostra pàgina web. Això és fàcil amb una mica de HTML5:
<input type="button" value="My Button" id="mybutton" />
<div id="console"></div>A més, podeu veure com he creat un bloc DIV on aniré escrivint per comprovar que el codi s’executa de forma correcte.
Codi JavaScript
Una vegada tenim el botó creat, ara toca crear el codi que s’encarrega de capturar l’event de prémer el botó i fer que es desactivi durant X segons (en el nostre cas, 2 segons):
$('#mybutton').click(function(e){
$('#mybutton').prop('disabled', true);
setTimeout(function() {
$('#mybutton').prop('disabled', false);
}, 2000);
$('#console').html('<br />Disabled');
});La primera línia, captura el click del nostre botó (#mybutton)
Una vegada captura quan premem sobre el botó, el desactivem/deshabilitem assignam a la propietat disabled el buleà true.
Després, amb la funció setTimeout, diem que quan passin 2 segons, es torni a habilitar el botó.
Per últim, s’escriu al block amb ID #console Disabled. D’aquesta manera sabem que ha accedit.
Codi en acció
Ara veurem el codi en acció. Fixa’t en el codi, i executa l’exemple a la part dreta. Prem sobre el botó “My Button” i veruàs com es desactiva durant dos segons.
See the Pen jQuery Disable button for X seconds by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Bé, ara ja sabeu com desactivar o deshabilitar un botó d’un formulari web durant X segons de forma fàcil. Son 5 línies de codi en jQuery,
Esperem que us sigui d’utilitat. I comparteix tecnologia en català !!!
Més informació