jQuery: limitare il numero di azioni sui controlli della UI

Uno dei problemi più comuni da affrontare con jQuery è la gestione del numero di azioni consentite sui controlli della UI. Si pensi ad esempio ai bottoni dei form o ai link: se l'utente attiva più di una volta un controllo possono verificarsi errori o effetti collaterali. Vediamo insieme una soluzione.

Partiamo dal seguente bottone:


<p>
	<button id="click" data-limit="2">Click</button>
	<span id="count"></span>
</p>

Tramite gli attributi di dati HTML5 abbiamo impostato un limite massimo di due clic sul bottone. Vediamo l'implementazione in jQuery:


$(function() {
   var btn = $('#click'),
       counter = 0,
       max = btn.data('limit'),
       count = $('#count');
       
  btn.on('click', function() {
    counter++;
    if(counter <= max) {
      count.text(counter);
    }
    
  });
});

L'utilità di questa tecnica appare ancora più evidente se pensiamo alle action AJAX: cosa succede se l'utente attiva più volte un controllo AJAX?

Torna su