Abilita / Disabilita il pulsante di input utilizzando JavaScript
- Usa JavaScript per abilitare / disabilitare il pulsante di input
- Usa jQuery per abilitare / disabilitare il pulsante di input
Questo tutorial insegna come abilitare / disabilitare un pulsante di input HTML utilizzando JavaScript / JQuery.
Spesso ci imbattiamo in situazioni in cui vogliamo abilitare / disabilitare un pulsante HTML, come prima e dopo aver inviato un modulo. Il modo migliore per farlo è usare JavaScript DOM Manipulation per selezionare il pulsante e cambiare il suo stato disabled in true/false per alternare lo stato on/off. Di seguito, vedremo due modi per disabilitare / abilitare un pulsante, uno utilizzando JavaScript e l’altro utilizzando JQuery.
Usa JavaScript per abilitare / disabilitare il pulsante di input
Di seguito è riportata la dimostrazione di un pulsante che si attiva quando viene immesso del testo in una casella e viene disattivato in altro modo.
Codice HTML
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
Codice JavaScript
let input = document.querySelector('.input');
let button = document.querySelector('.button');
button.disabled = true;
input.addEventListener('change', stateHandle);
function stateHandle() {
if (document.querySelector('.input').value === '') {
button.disabled = true;
} else {
button.disabled = false;
}
}
Qui, prima memorizziamo il riferimento all’input e al pulsante in due variabili, quindi impostiamo lo stato predefinito del pulsante su disabilitato. Aggiungiamo un listener di eventi per vedere se c’è qualche attività di input all’interno della casella di testo e quindi usiamo la funzione stateHandle() per disabilitare / abilitare il pulsante di invio di conseguenza.
Usa jQuery per abilitare / disabilitare il pulsante di input
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
Usiamo la funzione ready() per renderlo disponibile una volta che il documento è stato caricato. Il metodo .on() attacca quindi il gestore di eventi al campo di input. L’evento change verificherà le modifiche nel campo di immissione ed eseguirà la funzione di conseguenza. Il metodo .prop() cambia quindi lo stato del pulsante.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn