Lier une checkbox et un événement en jQuery

jQuery est une bibliothèque JavaScript qu’on ne présente plus. Dans sa version 3, apparaît la fonction .on, qui, associée à plusieurs mots-clef (mousein, mouseout, click, etc…), permet de placer des écouteurs d’évènements et à déclencher une fonction.

Aujourd’hui on va voir un petit truc très rapide pour déclencher un évènement lorsqu’une checkbox est cochée. Beaucoup de solutions existent sur google mais à cause des différentes versions de jQuery je m’y perds un peu…

$("#checkbox").on("change", function() {
 if ($(this).is(":checked")) {
  $("#btn")
   .prop("disabled", false)
   .removeClass("disabled")
   .removeClass("btn-secondary")
   .addClass("btn-primary");
 } else {
  $("#btn")
   .prop("disabled", true)
   .removeClass("btn-primary")
   .addClass("disabled")
   .addClass("btn-secondary");
 }
});

Donc là on demande que le sélecteur (input checkbox) portant un certain id, s’il est coché, active un bouton qui est sinon désactivé. Le prop permet de rendre égal à true ou false une propriété particulière (ici, disabled).
Le .on(« change », permet de détecter le changement d’état (checked) de ma checkbox.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *