Cliquez sur le bouton de désactivation de JavaScript
-
Utiliser la propriété JavaScript
disabledpour désactiver le clic sur le bouton -
Utiliser l’attribut jQuery
disabledpour désactiver un clic sur un bouton
En JavaScript, la propriété disabled ne fonctionne correctement que pour les boutons dont la racine est type="submit". Sinon, il ne fonctionnera pas comme un "one submit button" ; il acceptera plutôt plusieurs soumissions.
De même, l’attribut jQuery disabled fonctionne pour le bouton de type submit. De plus, la méthode de soumission du formulaire est très importante à cet égard.
Dans nos jeux d’exemples, nous verrons l’implémentation de la propriété JavaScript disabled et de l’attribut jQuery disabled.
Utiliser la propriété JavaScript disabled pour désactiver le clic sur le bouton
Généralement, nous définissons un formulaire et sa méthode pour assurer le but des soumissions. Quoi qu’il en soit, la propriété disabled de JavaScript nous permet de rendre un bouton inactif.
Ici, nous allons initier un champ input indiquant le type submit. Plus tard, en prenant une instance de la balise input, nous déclencherons la propriété disabled.
Extrait de code:
<body>
<p>Click the button to submit data!</p>
<p>
<input type='submit' value='Submit' id='btClickMe'
onclick='save();'>
</p>
<p id="msg"></p>
</body>
<script>
function save() {
var dis = document.getElementById('btClickMe').disabled = true;
var msg = document.getElementById('msg');
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html>
Production:
Utiliser l’attribut jQuery disabled pour désactiver un clic sur un bouton
En jQuery, nous aurons un cas d’utilisation similaire de l’attribut disabled. La différence ici est que nous allons initier le champ input (bouton de type submit) dans une balise form.
Nous nous assurerons que cela fonctionne également dans le formulaire.
Extrait de code:
<body>
<form id="fABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal button" id="btnTest">
<script>
$(document).ready(function () {
$("#fABC").submit(function (e) {
e.preventDefault();
$("#btnSubmit").attr("disabled", true);
$("#btnTest").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
Production:
La manière jQuery de désactiver un bouton est similaire à JavaScript. Dans l’exemple, nous avons ajouté un bouton général avec le type=button, qui ne peut pas être géré par l’attribut ou la propriété disabled.
Voici comment la propriété disabled de JavaScript ou de jQuery fonctionne pour désactiver un bouton d’envoi.
