Activer ou désactiver un bouton selon une checkbox

Résolu/Fermé

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - Modifié le 22 mars 2022 à 10:37
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 24 mars 2022 à 23:27

Bonjour à tous,

J'ai une table dont chaque ligne <td> est précédée d'une checkbox.
Dans la colonne d'entête <th> j'ai mis une checkbox qui check toutes les checkbox de la table si elle
est cochée... Les bouts de code JavaScript trouvés sur Internet fonctionnent bien MAIS...

J'ai voulu faire plus sophistiqué, c'est à dire que pour que le submit du formulaire qui enverra les lignes checked à l'enregistrement php soit enabled, il faut qu'au moins une checkbox soit cochée, or si elles sont toutes cochées et que j'en désélectionne une, le submit repasse à l'état disabled !
Voici mon code pour être plus clair :

<form>
<table>
<thead>
<tr>
    <th><input id='checkAll' type="checkbox" onclick="checkAllBox(this, 'coche');" onchange='handleChange(this);'/></th>
    <th>N°</th>
    <th>DATE</th>
    <th>CLIENT</th>
    <th>TYPE</th>
    <th>DÉBUT</th>
    <th>FIN</th>
    <th>TOTAL</th
</tr>
</thead>
<?php
$i=0;
while ($contrat1 = $requete->fetch()) { ?>
    <tr>
    <?php $i=$i+1;?>
        <td>
            <input type="checkbox" name="coche" value="<?php echo $i;?>" onchange='handleChange(this);'>
        </td>
        <td class="td-centre">
            <?php echo $contrat1['id_contrat']; ?>
        </td>

... / ...
<?php }?>
</table>
<input id='valid' disabled class="btn-forumulaire btn-vert" type="submit" value="FACTURER">
</form>

< script type = "text/javascript" >
    function checkAllBox(ref, name) {
        var form = ref;

        while (form.parentNode && form.nodeName.toLowerCase() != 'form') {
            form = form.parentNode;
        }

        var elements = form.getElementsByTagName('input');

        for (var i = 0; i < elements.length; i++) {
            if (elements[i].type == 'checkbox' && elements[i].name == name) {
                elements[i].checked = ref.checked;
            }
        }
    }

function handleChange(checkbox) {
    if (checkbox.checked == true) {
        document.getElementById("valid").removeAttribute("disabled");
    } else {
        document.getElementById("valid").setAttribute("disabled", "disabled");
        document.getElementById("checkAll").checked = false;

    }
}

<
/script>

MERCI d'avance pour votre aide !

Configuration: Linux / Chrome 99.0.4844.51

A voir également:

Activer ou désactiver un bouton selon une checkbox
Desactiver instagram - Guide
Comment activer windows 10 - Guide
Activer le pavé tactile - Guide
Comment activer chromecast sur tv - Guide
Désactiver onedrive - Guide

3 réponses

Réponse 1 / 3

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
23 mars 2022 à 17:17

Bonjour,

Actuellement ta fonction handleChange vérifie uniquement si la checkbox cliquée est cochée ou non. Il faudrait donc modifier cette fonction pour vérifier si au moins une checkbox est cochée (en vérifiant le retour de querySelectorAll('input[name="coche"]:checked') par exemple).

Au passage, tu devrais surement utiliser un tableau pour l'attribut name de tes checkbox si tu veux toutes les récupérer lors du traitement (

<input type="checkbox" name="coche[]" value="...">

). Pour l'instant le formulaire ne doit envoyer que la valeur de la dernière checkbox cochée.

Réponse 2 / 3

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
23 mars 2022 à 20:57

Bonsoir Pitet et merci pour ton aide

Je me suis aperçu effectivement que si je n'avais pas un input avec name="coche[]" ça n'allait pas fonctionner...
Du coup j'ai corrigé mon code et voici un truc qui semble fonctionner, en me servant de ta piste et piquant à droite et à gauche :

<table>
   <thead>
      <tr>
         <th><input id='checkAll' type="checkbox" onclick="checkAllBox(this, 'coche');" onchange='handleChange(this);'/></th>
         <th>N°</th>
         <th>DATE</th>
         <th>CLIENT</th>
         <th>TYPE</th>
         <th>DÉBUT</th>
         <th>FIN</th>
         <th>TOTAL</th>
      </tr>
   </thead>
   <h1>LISTE DES CLIENTS VALIDÉS</h1>
   <?php
      $i=1;
      foreach($contrats1 as $valeur) {
          $i++;?>
   <tr>
      <input type="hidden" name="nombre" value="<?php echo $i;?>">
      <td>
         <input type="checkbox" id="coche" name="coche[]" value="<?php echo $valeur['id_contrat']; ?>" onchange='handleChange(this);'>
      </td>
      <td class="td-centre">
         <?php echo $valeur['id_contrat']; ?>
      </td>
      <td class="td-centre">
         <?php echo date("d/m/Y", strtotime($valeur['date_contrat'])); ?>
      </td>
      <td class="td-gauche">
         <?php echo $valeur['client']; ?>
      </td>
      <td class="td-centre">
         <?php echo $valeur['batiment']; ?>
      </td>
      <td class="td-centre">
         <?php echo date("d/m/Y", strtotime($valeur['date_debut'])); ?>                                                
      </td>
      <td class="td-centre">
         <?php echo date("d/m/Y", strtotime($valeur['date_fin'])); ?>
      </td>
      <td class="td-droite">
         <?php echo number_format($valeur['total'], 2, ',', ' '); ?>
      </td>
   </tr>
   <?php }?>
</table>

<script type="text/javascript">
   function checkAllBox(ref, name) {
       var form = ref;         
       while (form.parentNode && form.nodeName.toLowerCase() != 'form') { form = form.parentNode; }
       var elements = form.getElementsByTagName('input');
       for (var i = 0; i < elements.length; i++) {
           if (elements[i].type == 'checkbox' && elements[i].id == name) {
               elements[i].checked = ref.checked;
           }
       }
   }
   function handleChange(checkbox) {
       const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')
       if(nodeList.length >0){
           document.getElementById("valid").removeAttribute("disabled");
           document.getElementById("valid").className = "btn-forumulaire btn-vert";
       }else{
           document.getElementById("valid").setAttribute("disabled", "disabled");
           document.getElementById("valid").className = "btn-forumulaire btn-vert-disabled";
           document.getElementById("checkAll").checked = false;
      }
   }     
</script>

// Connexion à la base de données :
require ("connexion.php");
// On récupère les numéros de contrats choisis pour être facturés
// Et on remplace leur état facture 1 par 2 :
foreach ($_POST['coche'] as $value):
if (!empty($value)):
$requete = $bdd->prepare('UPDATE contrats SET facture = 2 WHERE id_contrat = :contrat');
$requete->execute(array('contrat' => $value));
endif;
endforeach;

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
23 mars 2022 à 20:59

Ça te semble correct ?

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024
Modifié le 24 mars 2022 à 17:10

Oui la fonction js handleChange semble correcte, c'était bien l'idée de vérifier si le querySelectorAll des checkbox cochées retourne une liste avec une taille supérieure 0.

Du coup tu peux supprimer le paramètre checkbox dans le nom de la fonction handleChange() puisque celui-ci n'est plus utilisé (il faudra aussi supprimer le this passé en paramètre lors de l'appel à cette fonction dans l'attribut onchange de ton input).

Enfin, au lieu de changer la classe css btn-vert par btn-vert-disabled en js, tu pourrais directement utiliser la pseudo classe css :disabled pour styliser le bouton lorsqu'il possède l'attribut disabled.
Dans ton css, tu pourrais par exemple remplacer la classe .btn-vert-disabled par le sélecteur .btn-vert:disabled, ainsi tu ne devrais pas avoir besoin de changer la classe en js (le style changera si le bouton possède l'attribut disabled).

Réponse 3 / 3

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
24 mars 2022 à 23:27

Encore une fois merci pour tous tes bons conseils... je cours les mettre en application !

Discussions similaires

Bouton ON OFF, O ou I ?

Message "Un bloqueur de publicité empêche la lecture..."

Désactiver une touche du clavier : possible ?

Discussions similaires

Newsletters