jQuery: Désactiver Bouton de Soumission si aucune Checkbox n'est cochée

Parfois, nous aimerions permettre la soumission d'un formulaire uniquement si une ou au moins une case à cocher est cochée. Dans ce petit tutoriel, je voudrais vous montrer comment faire cela en utilisant JavaScript et jQuery.

Le script suivant s'assure que le bouton "Envoyer" est seulement actif ou enabled lorsqu'au moins une case à cocher (checkbox) du formulaire correspondant est sélectionnée.

HTML

Notre code HTML est un simple formulaire contenant trois cases à cocher et un bouton d'envoi:

<form action="">
   <input class="cbox" type="checkbox" name="cb1" value="1"> 1
   <input class="cbox" type="checkbox" name="cb2" value="2"> 2
   <input class="cbox" type="checkbox" name="cb3" value="3"> 3
   <input id="bt_submit" type="submit" value="Envoyer">
</form>

JavaScript/jQuery

Nous laissons le code jQuery suivant s'exécuter immédiatement après le chargement de la page HTML en utilisant $(document).ready() :

<script type="text/javascript">

  $(document).ready(function() { 

     $('#bt_submit').attr("disabled", true);

     $('.cbox').change(function() {
        $('#bt_submit').attr('disabled', $('.cbox:checked').length == 0);
     });

  });

</script>

Tout d'abord, nous définissons notre bouton d'envoi (submit button) sur désactivé (disabled) (plus d'informations à ce sujet dans la section suivante). Après cela, nous appliquons une fonction aux cases à cocher (checkboxes) qui est appelée chaque fois qu'une case à cocher est changé. Cette fonction ajuste l'état du bouton de soumission en fonction de l'état de la sélection. Pour cela, nous vérifions que le nombre de cases à cocher sélectionnées est égal à 0 et définissons l'attribut "disabled" en fonction de cette condition.

Important: Considérez les Utilisateurs avec JavaScript désactivé

Cette fonction ne fonctionne que lorsque JavaScript est activé dans le navigateur de l'utilisateur. Il ne remplace pas une vérification de l'entrée de l'utilisateur côté serveur qui doit être effectuée en plus.

Pour cette raison, nous définissons également l'attribut "disabled" du bouton d'envoi dans notre code JavaScript et pas déjà dans le HTML, ce qui pourrait également être fait en théorie. Le bouton submit n'est initialement pas désactivé lors du chargement de la page, même si aucune case n'est cochée à ce moment. Pour les utilisateurs avec JavaScript actif, le bouton est désactivé immédiatement après le chargement, ces utilisateurs ne remarquent pas que le bouton était autrefois actif. Pour les utilisateurs avec JavaScript désactivé, le code JavaScript ne peut pas être exécuté. Le bouton reste actif pour ces utilisateurs et le formulaire utilisable. Si nous avions immédiatement mis le bouton sur désactivé via HTML, le formulaire ne serait pas utilisable pour ces utilisateurs.