jQuery - Comment activer/désactiver un bouton submit ?

L'utilisation de jQuery pour activer ou désactiver un bouton a plusieurs avantages selon l'interaction de l'utilisateur. Vous allez facilement être capable d'utiliser ce code avec d'autres implémentations jQuery. Commençons nous.

Pour les impatients, vous pouvez utiliser la fonction prop() compatible avec les versions au dessous de jQuery 1.6:

$('.button').prop('disabled', true); //pour désactiver
$('.button').prop('disabled', false); //pour activer

Les autres qui veulent en savoir davantage et voir d'autres fonctions pour désactiver et activer un bouton, je vous invite à lire la suite.

En développement web, le problème le plus populaire est de cliquer deux fois sur le bouton submit. Parfois les utilisateurs cliquent plusieurs fois pour qu'ils soient certains que le bouton a été bien cliqué, mais ça cause une double validation.

Si vous avez créé un formulaire HTML, particulièrement avec jQuery et Ajax, vous aurez besoin de désactiver le bouton submit pendant que la page est entrain de se charger quand vous cliquez sur le bouton, parce que vous ne voulez pas que l'utilisateur clique une deuxième fois sur le même bouton car ça peut engendrer des erreurs. Donc, pour empêcher que ça arrive on a besoin de désactiver le bouton submit.

La solution consiste à désactiver le bouton submit après que l'utilisateur clique dessous, et afficher un loading ou un message pour montrer à l'utilisateur que le traitement est en progression.

Désactiver le bouton submit

Pour désactiver le bouton submit avec jQuery, vous avez besoin de désactiver l'attribut du bouton submit.

$('input:submit').click(function(){
 $('input:submit').attr("disabled", true); 
});

Activer le bouton submit

Pour activer le bouton submit désactivé, modifiez la valeur de l'attribut "disabled" avec false, ou supprimez l'attribut "disabled".

$('input:submit').attr("disabled", false); 
ou
$('input:submit').removeAttr("disabled");

Les fonctions attr() et removeAttr() joue le même rôle que la fonction prop() sauf qu'ils ont été intégrées à jQuery depuis la version 1.6.

Exemple

On va créer un formulaire HTML simple qui contient des input et un bouton. Ce formulaire est un formulaire de contact et l'utilisateur doit spécifier son nom, prénom, adresse email et message. L'idée est de ne pas permettre à l'utilisateur de cliquer deux fois sur le bouton "envoyer".

<html lang="en">
<head>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>
input,textarea{
 margin-bottom:10px;
}
</style>
</head>

<body>
<form action="" id="form" method="POST">
Nom: 
<input id="nom" name="nom" type="text" />
Prénom: 
<input id="prenom" name="prenom" type="text" />
Email: 
<input id="email" name="email" type="text" />
Message: 
<textarea cols="50" id="message" name="message" rows="5"></textarea>

<input id="btn_envoyer" type="submit" value="Envoyer" />
</form>
<script>
 $(function() 
 {
 $('#btn_envoyer').click(function()
 {
 $(this).attr("disabled", "disabled");
 });
 });
</script>
</body>

</html>

Si on teste ce code sur un navigateur web, ça donne le résultat suivant:

Après le clic, le bouton "Envoyer" a été désactivé.

Références:
How do I disable/enable a form element?
jQuery disable/enable submit button