Quando crei pagine web molto semplici, una delle prime cose utili da imparare è come far “reagire” un elemento della pagina al cambiamento di un altro, per esempio: abilitare un pulsante solo quando un checkbox è spuntato.

Prima di proseguire puoi vedere come fare a sapere se un checkbox è spuntato, leggendo l’articolo.

In questo articolo vediamo come fare tutto con HTML + JavaScript puro, senza nessun framework, così da poter copiare il codice e provarlo subito.

Struttura HTML di base

Partiamo da una pagina minimale con un checkbox e un pulsante:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>Esempio checkbox + pulsante</title>
</head>
<body>

  <label>
    <input type="checkbox" id="accept">
    Accetto i termini
  </label>

  <br><br>

  <button id="submitBtn" disabled>Continua</button>

  <div id="message"></div>

</body>
</html>

Abbiamo:

• un checkbox con id="accept",
• un pulsante submitBtn inizialmente disabilitato (disabled),
• un <div id="message"> dove mostreremo un messaggio all’utente.

Codice JavaScript per controllare lo stato del checkbox

Ora colleghiamo un piccolo script che controlla se il checkbox è spuntato:

<script>
// Recupera gli elementi dal DOM
const accept = document.getElementById("accept");
const submitBtn = document.getElementById("submitBtn");
const message = document.getElementById("message");
 // Ascolta i cambiamenti sul checkbox
accept.addEventListener("change", function () {
    if (accept.checked) {
       submitBtn.disabled = false;
       message.textContent = "Puoi proseguire cliccando il pulsante.";
    } else {
       submitBtn.disabled = true;
       message.textContent = "Devi prima accettare i termini."; }
 });
</script>

Puoi mettere questo <script>:

• subito prima di </body>, oppure
• in un file esterno (es. script.js) e collegarlo così:

<script src="script.js"></script>

Cosa fa il codice nel dettaglio

• accept.checked è un valore booleano:
  • true se il checkbox è spuntato,
  • false se non lo è.
• addEventListener("change") reagisce non solo al clic del mouse, ma anche all’uso da tastiera o da strumenti di accessibilità.
• submitBtn.disabled = true/false blocca o sblocca il pulsante, rendendo l’interfaccia più chiara per l’utente.

Come adattare l’esempio al tuo sito

Puoi riutilizzare questo schema in qualsiasi pagina del tuo sito semplicemente:

• cambiare i id in base ai tuoi elementi HTML, per esempio:

const myCheckbox = document.getElementById("myCheckbox"); 
const myButton = document.getElementById("myButton");

• aggiungere messaggi personalizzati nel textContent del <div>.
• combinare con altri controlli, per esempio abilitare il pulsante solo se:
  • il checkbox è spuntato e
  • l’email è corretta.

Buone pratiche

Usa sempre change invece di click per garantire accessibilità e compatibilità con tastiera.

• Fai sempre in modo che il pulsante sia disabilitato di default se è necessario il consenso (esperienza coerente).
• Se il tuo sito usa più di un checkbox, puoi estendere la logica con querySelectorAll e un ciclo per verificare lo stato di tutti.

Scarica l’esempio completo: Abilitare un pulsante solo quando un checkbox è spuntato