Activer ou désactiver un bouton selon une checkbox

Résolu
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -  
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -
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:

3 réponses

Réponse 1 / 3
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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.
1
Réponse 2 / 3
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 
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;
0
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 
Ça te semble correct ?
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527 > emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention  
 
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).
1
Réponse 3 / 3
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 
Encore une fois merci pour tous tes bons conseils... je cours les mettre en application !
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Désactiver une touche du clavier : possible ?
Nina -
uroruurrrr -

32 réponses