Comportement checkbox selon celles déjà validées (ou non)

Résolu
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 - 15 sept. 2022 à 15:20
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 - 20 sept. 2022 à 09:26

Bonjour à tous,

J'ai une <table> dont le premier <td> contient une checkbox.
Cette table qui liste des contrats d’hébergements et des contrats de restauration est alimentée par des données en provenance d'une BDD à l'aide d'une boucle WHILE.
L'utilisateur peut cocher une ou plusieurs checkbox. Dès qu'il coche une checkbox, le bouton de type submit est enable, si aucune box est cochée il est disabled.

Tout ça fonctionne parfaitement, sauf que on m'a demandé de rendre impossible le check de contrats d’hébergements si des contrats de restauration étaient déjà checked et inversement ! Le problème c'est que le type de contrat n'apparaît que dans le 5ème <td> : "TYPE", et je ne sais pas comment je pourrais passer l'info "type" à ma fonction !

Je n'ai aucune idée de par où commencer pour traiter ce genre de comportement, c'est pourquoi je viens vous demander un peu d'aide ! 
Merci d'avance 

La checkbox dans la boucle :

echo '<td class="td-centre"><input type="checkbox" id="coche" name="coche[]" value="' .  $data_contrat['id_contrat'] . '" onchange="handleChange(this);"></td><td class="td-centre"  data-label="N°" >' . ' <a href="contrat-fiche.php?id_contrat=' . $data_contrat['id_contrat'] . '" title="CONTRAT VALIDÉ">' . $data_contrat['id_contrat'] . '</a></td>';

Le traitement du bouton valider : 

function handleChange(checkbox) {
    const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')
        
    if(nodeList.length >0){
        document.getElementById("facture").removeAttribute("disabled");
        document.getElementById("facture").style.cursor = 'pointer';
        document.getElementById("facture").className = "btn-forumulaire btn-vert";
    }
    else{
        document.getElementById("facture").setAttribute("disabled", "disabled");
        document.getElementById("facture").style.cursor = 'none';
        document.getElementById("facture").className = "btn-forumulaire btn-vert-disabled";
        /*document.getElementById("checkAll").checked = false;*/
    }
}


Linux / Chrome 105.0.0.0

9 réponses

jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462
18 sept. 2022 à 10:59

Bon..

Plutot que de gérer chaque cas à la main via des if, il serait plus propre de gérer ceux qui ne sont pas du même type que la case cochée.

Pour faciliter les choses,

Dans tes checkbox tu remplaces toutes les class par UNE class : class="choixType"

Et, pour chaque checkbox, ajouter un data-attribute   data-type="XXX"   avec le XXX correspondant à JARDIN ou TABLE D'HÔTES ou VILLAGE .. bref.. le "TYPE" voulu.

et pour rappel, une class doit être un mot SANS espaces ( un élément html pouvant avoir plusieurs class, l'espace servant à séparer chacune d'elle). Ne pas oublier que les class servent aussi ( en priorité d'ailleurs...) pour le css ...  si tu commences à polluer avec des trucs farfelus tu risques de rencontrer des soucis un jour ou l'autre.

Cette parenthèse étant faite, maintenant, dans ton JS tu peux faire ceci :

  function checkOrUnCheckAllChkbByType(checkboxes,check){
    checkboxes.forEach(function(currentElm, index){
      if(check == true){
        currentElm.setAttribute("disabled","disabled");
      }else{
        currentElm.removeAttribute("disabled");
      }
    });
  }

function handleChange(checkbox) {

    //data-type de l'élément cliqué :
    var cls = checkbox.getAttribute("data-type");
    console.log("data-type cliquee",cls);
    //on vérifie si on a coché ou décoché cette case:
    var isChecked = checkbox.checked;
    console.log("isChecked",isChecked);
    
    //on cible toutes les checkbox qui ont la class="choixType" qui ne sont pas du même data-type que celle cliquée
    var autresChoix = document.querySelectorAll('.choixType:not([data-type="'+cls+'"])');
    console.log('autres checkbox',autresChoix);
    checkOrUnCheckAllChkbByType(autresChoix,isChecked);
    
}

.
Cordialement,
Jordane

1
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462
15 sept. 2022 à 16:46

Bonjour,

Ta variable  $data_contrat  contient-elle le TYPE ?

Si non.. il faut ajouter cette information...

Ensuite, tu peux toujours ajouter sur tes checkbox l'info du type ( soit dans la class  soit via un data-attribut)

Tu pourras ensuite facilement récupérer tous les checkbox d'un TYPE et voir si il est à zéro ou non...


.
Cordialement,
Jordane

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 16 sept. 2022 à 13:56

Salut Jordan,

Oui, la colonne TYPE contient cette info : 

<td class="td-gauche" data-label="TYPE" >
    <?php echo $data_contrat['batiment']; ?>

</td>

Mais comment fait-on pour ajouter une donnée dans la Class ? On parle bien de ce qui sert au CSS pour formater la page ?
Un truc comme ça ? 

if($data_contrat['etat']==1){
    echo '<td class="td-centre"><input type="checkbox" class="' . $data_contrat['batiment'] . '" id="coche" name="coche[]" value="' .  $data_contrat['id_contrat'] . '" onchange="handleChange(this);"></td><td class="td-centre"  data-label="N°" >' . ' <a href="contrat-fiche.php?id_contrat=' . $data_contrat['id_contrat'] . '" title="CONTRAT VALIDÉ">' . $data_contrat['id_contrat'] . '</a></td>';
}
0
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
16 sept. 2022 à 14:07

ton data-label n'est pas renseigné dynamiquement en fonction du type

Mais donc, en partant du data-label,  tu peux donc "cibler" les éléments contenant une certaines valeurs.. et voir si il y en a de cochés

par exemple

// ✅ Get all elements with data-id = `box1`
const elements = document.querySelectorAll('[data-label="truc"]:checked');
console.log(elements.length); // affichera le nombre de checkbox ayant un data-label = truc cochées
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023
Modifié le 16 sept. 2022 à 22:52

Mon data-label est bien renseigné dynamiquement puisque sur un mobile il m'affiche le n°du contrat : 
<td class="td-centre"  data-label="N°" >' . ' <a href="contrat-fiche.php?id_contrat=' . $data_contrat['id_contrat'] . '" title="CONTRAT VALIDÉ">' . $data_contrat['id_contrat'] . '</a></td>
 

J'ai utilisé ton code que j'ai adapté pour affecter dynamiquement la class de la checkbox...
J'ai les bonnes infos dans la console mais ce code ne fonctionne pas : 
 

function handleChange(checkbox) {
    const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')

    const checkTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked');
    const checkJardin = document.querySelectorAll('input[class="JARDIN"]:checked');
    if(checkTableHotes.length>=1){
        console.log(checkTableHotes.length);// Affiche bien 1 si coché ou 0 si non
        console.log(checkJardin.length);// Affiche bien 1 si coché ou 0 si non
        document.getElementsByClassName("JARDIN").setAttribute("disabled","disabled");
    }
    else {
        document.getElementsByClassName("JARDIN").removeAttribute("disabled");
    }
}

ERREUR : document.getElementsByClassName(...).setAttribute is not a function

J'ai essayé : 
checkJardin.setAttribute("disabled","disabled"); // IDEM, même erreur

0
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
16 sept. 2022 à 23:04

Tu noteras que l'instruction

getElementsByClassName

contient un "s" à elements

ce qui indique qu'il ne retourne pas qu'un seul élément .. mais plusieurs.

Tu ne peux donc pas directement gérer son attribut disabled.... il te faut boucler dessus...

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023
16 sept. 2022 à 23:34

J'ai fait ça mais je n'ai pas le résultat escompté, en effet si je coche TABLE D'HÔTES,  JARDIN n'est pas disabled instantanément, pourtant si je clique dessus la box JARDIN devient grisée... Si je décoche TABLE D'HÔTES,  JARDIN reste grisée !

function handleChange(checkbox) {
   const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')

    const checkTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked');
    const checkJardin = document.querySelectorAll('input[class="JARDIN"]:checked');
    if(checkTableHotes.length>=1){
      for(var index=0;index < checkJardin.length;index++){
        checkJardin[index].checked = false;
        checkJardin[index].setAttribute("disabled","disabled");
      }
    }
    else {
      for(var index=0;index < checkJardin.length;index++){
        checkJardin[index].checked = true;
        checkJardin[index].removeAttribute("disabled");
      }
    }
}
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 17 sept. 2022 à 14:51

Je suis étonné par ce que tu me conseilles car : 
input[class="TABLE D\'HÔTES"] fonctionne bien avec les crochets et j'obtiens bien 1 en console quand je coche "TABLE D'HÔTES" et 0 quand je décoche... 

const checkTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked');
if(checkTableHotes.length>=1){
          console.log(checkTableHotes.length);  // ------------------->Affiche 1 si cochée
}
if(checkTableHotes.length==0){
          console.log(checkTableHotes.length);  // ------------------->Affiche 0 si décochée
}

Ce que je voudrais faire maintenant c'est que SI TABLE D'HÔTES est cochée les checkbox qui ne sont pas des TABLE D'HÔTES soient inaccessibles, comme désactivées, donc incochables... 

Malheureusement ces lignes n'ont pas l'effet escompté : 

for(var index=0;index < checkJardin.length;index++){
    checkJardin[index].setAttribute("disabled","disabled");
}


CTRL+u

<form method="post" action="facture-creation.php">
   <table class="order-table table">
      <caption>3 CONTRAT(S) DU CLIENT</caption>
      <thead>
         <!-- En-tête du tableau -->
         <tr>
            <!--<th><input id='checkAll' type="checkbox" onclick="checkAllBox(this, 'coche');" onchange='handleChange(this);'/></th>-->
            <th></th>
            <th>N°</th>
            <th>FACT</th>
            <th>DATE</th>
            <th>TYPE</th>
            <th>DATE DÉBUT</th>
            <th>DATE FIN</th>
            <th>TOTAL</th>
            <th>ACTIONS</th>
         </tr>
      </thead>
      <tbody>
         <tr
            >
            <td class="td-centre"><input type="checkbox" class="TABLE D'HÔTES" id="coche" name="coche[]" value="636" onchange="handleChange(this);"></td>
            <td class="td-centre"  data-label="N°" > <a href="contrat-fiche.php?id_contrat=636" title="CONTRAT VALIDÉ">636</a></td>
            <td class="td-centre" data-label="FACT" >
            </td>
            <td class="td-centre" data-label="DATE" >
               15/09/2022                  
            </td>
            <td class="td-gauche" data-label="TYPE" >
               TABLE D'HÔTES                  
            </td>
            <td class="td-centre" data-label="DÉBUT" >
               15/09/2022                  
            </td>
            <td data-label="FIN" class="td-centre">
               15/09/2022                  
            </td>
            <td data-label="TOTAL" class="td-droite">
               105,00                  
            </td>
            <td class="td-centre">
               <!-- ############## FICHE 1 ####################-->
               <a href="contrat-fiche.php?id_contrat=636">
               <img class="td-icone" src="img/loupe.png" alt="Consulter le contrat validé" title="Consulter le contrat validé">
               </a>
               <!-- ############## CONTRAT 1 ####################-->
               <img class="td-icone icone-opacity" src="img/contrat.png" alt="Contrat Table d'hôtes" title="Contrat Table d'hôtes">
               <!-- ############## SUPPRIMER 0 ###################-->
               <img class="td-icone icone-opacity" src="img/delete.png" alt="Contrat validé" title="Contrat validé">
            </td>
         </tr>
         <tr class="separateur"></tr>
         <tr
            >
            <td class="td-centre"><input type="checkbox" class="JARDIN" id="coche" name="coche[]" value="624" onchange="handleChange(this);"></td>
            <td class="td-centre"  data-label="N°" > <a href="contrat-fiche.php?id_contrat=624" title="CONTRAT VALIDÉ">624</a></td>
            <td class="td-centre" data-label="FACT" >
            </td>
            <td class="td-centre" data-label="DATE" >
               28/07/2022                  
            </td>
            <td class="td-gauche" data-label="TYPE" >
               JARDIN                  
            </td>
            <td class="td-centre" data-label="DÉBUT" >
               26/12/2022                  
            </td>
            <td data-label="FIN" class="td-centre">
               29/12/2022                  
            </td>
            <td data-label="TOTAL" class="td-droite">
               650,00                  
            </td>
            <td class="td-centre">
               <!-- ############## FICHE 1 ####################-->
               <a href="contrat-fiche.php?id_contrat=624">
               <img class="td-icone" src="img/loupe.png" alt="Consulter le contrat validé" title="Consulter le contrat validé">
               </a>
               <!-- ############## CONTRAT 1 ####################-->
               <a href="contrat-imprimer.php?id_contrat=624" target="_blank">
               <img class="td-icone" src="img/contrat.png" alt="Imprimer le contrat" title="Imprimer le contrat">
               </a>
               <!-- ############## SUPPRIMER 0 ###################-->
               <img class="td-icone icone-opacity" src="img/delete.png" alt="Contrat validé" title="Contrat validé">
            </td>
         </tr>
         <tr class="separateur"></tr>
         <tr
            >
            <td class="td-centre"><input type="checkbox" class="VILLAGE" id="coche" name="coche[]" value="623" onchange="handleChange(this);"></td>
            <td class="td-centre"  data-label="N°" > <a href="contrat-fiche.php?id_contrat=623" title="CONTRAT VALIDÉ">623</a></td>
            <td class="td-centre" data-label="FACT" >
            </td>
            <td class="td-centre" data-label="DATE" >
               28/07/2022                  
            </td>
            <td class="td-gauche" data-label="TYPE" >
               VILLAGE                  
            </td>
            <td class="td-centre" data-label="DÉBUT" >
               26/12/2022                  
            </td>
            <td data-label="FIN" class="td-centre">
               29/12/2022                  
            </td>
            <td data-label="TOTAL" class="td-droite">
               1 550,00                  
            </td>
            <td class="td-centre">
               <!-- ############## FICHE 1 ####################-->
               <a href="contrat-fiche.php?id_contrat=623">
               <img class="td-icone" src="img/loupe.png" alt="Consulter le contrat validé" title="Consulter le contrat validé">
               </a>
               <!-- ############## CONTRAT 1 ####################-->
               <a href="contrat-imprimer.php?id_contrat=623" target="_blank">
               <img class="td-icone" src="img/contrat.png" alt="Imprimer le contrat" title="Imprimer le contrat">
               </a>
               <!-- ############## SUPPRIMER 0 ###################-->
               <img class="td-icone icone-opacity" src="img/delete.png" alt="Contrat validé" title="Contrat validé">
            </td>
         </tr>
         <tr class="separateur"></tr>
      </tbody>
   </table>
   <div class="boutons">
      <input id='facture' disabled class="btn-forumulaire btn-vert-disabled facturer" type="submit" value="FACTURER"style="cursor:default;">
   </div>
</form>
<script type="text/javascript">
//##################### C H E C K   B O X   A N D   B U T T O N    ###################
function handleChange(checkbox) {
    const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')

    const checkTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked');
    const checkJardin = document.querySelectorAll('input[class="JARDIN"]:checked');
    /*const checkTableHotes = document.querySelectorAll('input.TABLE_HOTES:checked');
    const checkJardin = document.querySelectorAll('input.JARDIN:checked');*/
    if (checkTableHotes.length >= 1) {
        console.log(checkTableHotes.length);
        for (var index = 0; index < checkJardin.length; index++) {

            checkJardin[index].setAttribute("disabled", "disabled");
        }
    }
    if (checkTableHotes.length == 0) {
        console.log(checkTableHotes.length);
        for (var index = 0; index < checkJardin.length; index++) {

            checkJardin[index].removeAttribute("disabled");

        }
    }
    if (checkJardin.length >= 1) {
        for (var index = 0; index < checkTableHotes.length; index++) {

            checkTableHotes[index].setAttribute("disabled", "disabled");
        }
    } else {
        for (var index = 0; index < checkTableHotes.length; index++) {

            checkTableHotes[index].removeAttribute("disabled");

        }
    }

    if (nodeList.length > 0) {
        document.getElementById("facture").removeAttribute("disabled");
        document.getElementById("facture").style.cursor = 'pointer';
        document.getElementById("facture").className = "btn-forumulaire btn-vert";
    } else {
        document.getElementById("facture").setAttribute("disabled", "disabled");
        document.getElementById("facture").style.cursor = 'none';
        document.getElementById("facture").className = "btn-forumulaire btn-vert-disabled";
        /*document.getElementById("checkAll").checked = false;*/
    }
}
</script>
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 17 sept. 2022 à 15:06
const checkTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked');
const checkJardin = document.querySelectorAll('input[class="JARDIN"]:checked');
/*const checkTableHotes = document.querySelectorAll('input.TABLE_HOTES:checked');
const checkJardin = document.querySelectorAll('input.JARDIN:checked');*/
if (checkTableHotes.length >= 1) {
    console.log(checkTableHotes.length);
    for (var index = 0; index < checkJardin.length; index++) {
        checkJardin[index].disabled = true;
    }
}
if (checkTableHotes.length == 0) {
    console.log(checkTableHotes.length);
    for (var index = 0; index < checkJardin.length; index++) {
        checkJardin[index].disabled = false;
    }
}


Quand j'essaie le code ci-dessus, je coche TABLE D'HÔTES, la checkbox JARDIN ne devient pas instantanément disabled, et si je clique ensuite sur JARDIN, la coche se fait et devient grisée aussitôt ! Je voudrai que le fait de cocher soit impossible comme ici : 
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_disabled2

 

0
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462
17 sept. 2022 à 22:57
function handleChange(checkbox) {
    const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')

    const checkTableHotesChecked = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked'); // liste des case cochées avec la class...
    const checkJardinChecked = document.querySelectorAll('input[class="JARDIN"]:checked'); // liste des case cochées avec la class...
    const checkTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]'); // liste des case cochées ou non avec la class...
    const checkJardin = document.querySelectorAll('input[class="JARDIN"]');  // liste des case cochées ou non avec la class...
   
    console.log('checkTableHotesChecked',checkTableHotesChecked.length);
    console.log('checkJardinChecked',checkJardinChecked.length);
   
    if (checkTableHotesChecked.length >= 1) {
      for (var index = 0; index < checkJardin.length; index++) {
        console.log("on désactive checkJardin");
        checkJardin[index].setAttribute("disabled", "disabled");
      }
    }else {
      console.log("on réactive checkJardin");
      for (var index = 0; index < checkJardin.length; index++) {
        checkJardin[index].removeAttribute("disabled");
      }
    }
    if (checkJardin.length >= 1) {
      console.log("on désactive checkTableHotes");
      for (var index = 0; index < checkTableHotesChecked.length; index++) {
        checkTableHotes[index].setAttribute("disabled", "disabled");
      }
    } else {
       console.log("on réactive checkTableHotes");
      for (var index = 0; index < checkTableHotesChecked.length; index++) {
        checkTableHotes[index].removeAttribute("disabled");
      }
    }

    if (nodeList.length > 0) {
        document.getElementById("facture").removeAttribute("disabled");
        document.getElementById("facture").style.cursor = 'pointer';
        document.getElementById("facture").className = "btn-forumulaire btn-vert";
    } else {
        document.getElementById("facture").setAttribute("disabled", "disabled");
        document.getElementById("facture").style.cursor = 'none';
        document.getElementById("facture").className = "btn-forumulaire btn-vert-disabled";
        /*document.getElementById("checkAll").checked = false;*/
    }
}

.
Cordialement,
Jordane

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
18 sept. 2022 à 08:57

Merci Jordan pour tout ce temps passé pour m'aider !!!

Problème : Quand je sélectionne la première checkbox TABLES D'HÔTES, elle se coche mais devient aussitôt disabled rendant impossible son décochage (en cas d'erreur de l'utilisateur).
JARDIN est bien désactivée par contre.

Je me suis servi de ton travail pour écrire le code ci dessous...
Seuls CHAMBRE et TABLES D'HÔTES fonctionnent correctement !
Je pense que le problème vient de la suite de if et de else, car si je vire tout pour ne garder que JARDIN et TABLES D'HÔTES sans rien changer au code , ça fonctionne !

//##################### C H E C K   B O X   A N D   B U T T O N    ###################
function handleChange(checkbox) {
    const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')

    // Liste des états possibles des checkbox :
    const checkedTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]:checked');
    const unCheckedTableHotes = document.querySelectorAll('input[class="TABLE D\'HÔTES"]');
    const checkedJardin = document.querySelectorAll('input[class="JARDIN"]:checked');
    const unCheckedJardin = document.querySelectorAll('input[class="JARDIN"]');
    const checkedVillage = document.querySelectorAll('input[class="VILLAGE"]:checked');
    const unCheckedVillage = document.querySelectorAll('input[class="VILLAGE"]');
    const checkedChambre = document.querySelectorAll('input[class="CHAMBRE"]:checked');
    const unCheckedChambre = document.querySelectorAll('input[class="CHAMBRE"]');


    // --------------------------------------------------
    // Si une prestation TABLE D'HÔTES est selectionnée : 
    if (checkedTableHotes.length >= 1) {
        for (var index = 0; index < unCheckedJardin.length; index++) {
            unCheckedJardin[index].disabled = true;
        }
        for (var index = 0; index < unCheckedVillage.length; index++) {
            unCheckedVillage[index].disabled = true;
        }
        for (var index = 0; index < unCheckedChambre.length; index++) {
            unCheckedChambre[index].disabled = true;
        }
    }
    // Si aucune prestation TABLE D'HÔTES n'est selectionnée : 
    else {
        for (var index = 0; index < unCheckedJardin.length; index++) {
            unCheckedJardin[index].disabled = false;
        }
        for (var index = 0; index < unCheckedVillage.length; index++) {
            unCheckedVillage[index].disabled = false;
        }
        for (var index = 0; index < unCheckedChambre.length; index++) {
            unCheckedChambre[index].disabled = false;
        }
    }

    // ------------------------------------------
    // Si une prestation JARDIN est selectionnée :
    if (checkedJardin.length >= 1) {
        for (var index = 0; index < unCheckedTableHotes.length; index++) {
            unCheckedTableHotes[index].disabled = true;
        }
    }
    // Si aucune prestation JARDIN n'est selectionnée : 
    else {
        for (var index = 0; index < unCheckedTableHotes.length; index++) {
            unCheckedTableHotes[index].disabled = false;
        }
    }

    // ------------------------------------------
    // Si une prestation VILLAGE est selectionnée :
    if (checkedVillage.length >= 1) {
        for (var index = 0; index < unCheckedTableHotes.length; index++) {
            unCheckedTableHotes[index].disabled = true;
        }
    }
    // Si aucune prestation VILLAGE n'est selectionnée : 
    else {
        for (var index = 0; index < unCheckedTableHotes.length; index++) {
            unCheckedTableHotes[index].disabled = false;
        }
    }

    // --------------------------------------------
    // Si une prestation CHAMBRE est selectionnée :
    if (checkedChambre.length >= 1) {
        for (var index = 0; index < unCheckedTableHotes.length; index++) {
            unCheckedTableHotes[index].disabled = true;
        }
    }
    // Si aucune prestation CHAMBRE n'est selectionnée : 
    else {
        for (var index = 0; index < unCheckedTableHotes.length; index++) {
            unCheckedTableHotes[index].disabled = false;
        }
    }

    // ------------------------------------------------
    // Activation ou non du bouton selon les checkbox :
    if (nodeList.length > 0) {
        document.getElementById("facture").removeAttribute("disabled");
        document.getElementById("facture").style.cursor = 'pointer';
        document.getElementById("facture").className = "btn-forumulaire btn-vert";
    } else {
        document.getElementById("facture").setAttribute("disabled", "disabled");
        document.getElementById("facture").style.cursor = 'none';
        document.getElementById("facture").className = "btn-forumulaire btn-vert-disabled";
        /*document.getElementById("checkAll").checked = false;*/
    }
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 19 sept. 2022 à 18:54

J'ai bien vu que les suite de IF et de ELSE ça faisait pas très PROpre !

Avec class="choixType" on règle donc le problème de l'espace de TABLE D'HÔTES qui pouvait être perçu comme 2 class séparées d'un espace !

Je découvre au passage, grâce à ta proposition, les attributs de données qui sont bien pratiques pour passer des infos dans des zones autres que celles utilisées habituellement dans un formulaire (input, select, ...).

Ton code Javascript fonctionne mieux que le mien ;-) mais il n'a pas le bon comportement pour ce que je veux faire ! (Cf mon post d'intro). En effet, je cherche à ne pas pouvoir cocher TABLE D'HÔTES (qui est une prestation repas) avec JARDIN ou VILLAGE ou CHAMBRE (qui sont des prestations hébergement). Par contre je dois pouvoir cocher JARDIN + VILLAGE + CHAMBRE  pour générer une facture commune à ces 3 contrats qui sont des prestations hébergement et qui peuvent donc être regroupées... On m'a demandé de ne pas pouvoir mélanger la bouffe et le couchage !
Il va donc falloir mettre quelques IF non ?
 

(Génial les sorties console.log : c'est super pratique pour voir comment Javascript gère les actions de l'utilisateur !).

0
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462
19 sept. 2022 à 19:24

Non.

Il te suffit de mettre un data attribut pour les tables d'hôtes et un autre data attribut pour les autres.. et modifier le code JavaScript en utilisant soit un des codes attribut soit l'autre..

1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 20 sept. 2022 à 08:48

Le problème c'est que je ne connais pas à l'avance le data attribut puisque la table est remplie dynamiquement... à moins de créer des data attribut dynamiques dans la boucle : 
 

if($data_contrat['batiment']=='TABLE D\'HÔTES'){
    $type = 'restauration';
}
else {
    $type = 'hebergement';
}
echo '<td class="td-centre"><input type="checkbox" data-' . $type . '="' . $data_contrat['batiment'] .'" class="choixType" //... etc etc ...

et : 

var cls = checkbox.getAttribute("data-hebergement"); 


 

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
20 sept. 2022 à 09:06

Ça fonctionne !!!
 

if($data_contrat['batiment']=='TABLE D\'HÔTES'){
    $type = 'restauration';
}
else {
    $type = 'hebergement';
}

if($data_contrat['etat']==1){
    echo '<td class="td-centre"><input type="checkbox" data-type ="' . $type .'" class="choixType" id="coche" name="coche[]" value="' .  $data_contrat['id_contrat'] . '" onchange="handleChange(this);"></td><td class="td-centre"  data-label="N°" >' . ' <a href="contrat-fiche.php?id_contrat=' . $data_contrat['id_contrat'] . '" title="CONTRAT VALIDÉ">' . $data_contrat['id_contrat'] . '</a></td>';
}
//##################### C H E C K   B O X   A N D   B U T T O N    ###################
function checkOrUnCheckAllChkbByType(checkboxes, check) {
    checkboxes.forEach(function(currentElm, index) {
        if (check == true) {
            currentElm.setAttribute("disabled", "disabled");
        } else {
            currentElm.removeAttribute("disabled");
        }
    });
}

function handleChange(checkbox) {
    //data-type de l'élément cliqué :
    var cls = checkbox.getAttribute("data-type");
    console.log("data-type cliquee", cls);
    //on vérifie si on a coché ou décoché cette case:
    var isChecked = checkbox.checked;
    console.log("isChecked", isChecked);

    //on cible toutes les checkbox qui ont la class="choixType" qui ne sont pas du même data-type que celle cliquée
    var autresChoix = document.querySelectorAll('.choixType:not([data-type="' + cls + '"])');
    console.log('autres checkbox', autresChoix);
    checkOrUnCheckAllChkbByType(autresChoix, isChecked);

}

MERCIIIIII JORDAN !!!!

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
20 sept. 2022 à 09:17

Question bonus : 
Si je coche JARDIN (hébergement) puis je coche VILLAGE (hébergement) puis je décoche JARDIN en laissant VILLAGE coché, à ce moment là TABLE D'HÔTES est accessible. Si j'essaie de cocher TABLE D'HÔTES avec VILLAGE précoché, VILLAGE devient disabled mais un disabled coché !!!

Il y a t-il moyen de le "disabled décoché" ?

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
20 sept. 2022 à 09:21
if(check == true){
    currentElm.setAttribute("disabled","disabled");
    currentElm.checked = false; // Trouvé !
}
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 20 sept. 2022 à 09:28

Code complet fonctionnel : 

PHP : 

echo '<td class="td-centre"><input type="checkbox" data-type ="' . $type .'" class="choixType" id="coche" name="coche[]" value="' .  $data_contrat['id_contrat'] . '" onchange="handleChange(this);"></td><td class="td-centre"  data-label="N°" >' . ' <a href="contrat-fiche.php?id_contrat=' . $data_contrat['id_contrat'] . '" title="CONTRAT VALIDÉ">' . $data_contrat['id_contrat'] . '</a></td>';

JavaScript : 

//##################### C H E C K   B O X   A N D   B U T T O N    ###################
function checkOrUnCheckAllChkbByType(checkboxes, check) {
    checkboxes.forEach(function(currentElm, index) {
        if (check == true) {
            currentElm.setAttribute("disabled", "disabled");
            currentElm.checked = false;
        } else {
            currentElm.removeAttribute("disabled");
        }
    });
}

function handleChange(checkbox) {
    const nodeList = document.querySelectorAll('input[name="coche[]"]:checked')

    //data-type de l'élément cliqué :
    var cls = checkbox.getAttribute("data-type");
    console.log("data-type cliquee", cls);
    //on vérifie si on a coché ou décoché cette case:
    var isChecked = checkbox.checked;
    console.log("isChecked", isChecked);

    //on cible toutes les checkbox qui ont la class="choixType" qui ne sont pas du même data-type que celle cliquée
    var autresChoix = document.querySelectorAll('.choixType:not([data-type="' + cls + '"])');
    console.log('autres checkbox', autresChoix);
    checkOrUnCheckAllChkbByType(autresChoix, isChecked);

    // ------------------------------------------------
    // Activation ou non du bouton selon les checkbox :
    if (nodeList.length > 0) {
        document.getElementById("facture").removeAttribute("disabled");
        document.getElementById("facture").style.cursor = 'pointer';
        document.getElementById("facture").className = "btn-forumulaire btn-vert";
    } else {
        document.getElementById("facture").setAttribute("disabled", "disabled");
        document.getElementById("facture").style.cursor = 'none';
        document.getElementById("facture").className = "btn-forumulaire btn-vert-disabled";
        /*document.getElementById("checkAll").checked = false;*/
    }

}

Mille mercis JORDAN !

0