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

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);
    
}

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...

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>

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;*/
    }
}

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 !).

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"); 

Ç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 !!!!

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é" ?

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 !