Griser un formulaire à l'aide d'une checkBox

Bonjour ,

voila mon problème j'ai une checkBox et j'aimerais que lorsque les utilisateurs coche la case tous les champs du formulaire soient grisés et lorsqu'on décoche qu'on puisse à nouveau saisir.

J'ai réussi à griser en utilisant un seul champ de mon formulaire mais je n'arrive pas à en griser plusieurs voici mon code

Code:

---

1 2 3 4 5 6 7 8

<tr <?php echo helper_alternate_class() ?>> <td class="category"> <?php print_documentation_link( 'cloture) ?> </td> <td> <label><input <?php echo helper_get_tab_index()?> type="checkbox" id="cloture" name="cloture" onclick="DesactiverZoneTexte('fa')"/> <?php echo lang_get( 'check_close' ) ?></label> </td> </tr>

---

Code:

---

1 2 3 4 5 6 7

function DesactiverZoneTexte(element){ var text = document.getElementById(element); if(text.disabled == true) text.disabled = false; else text.disabled = true; }

---

Merci par avance pour votre aide :)

Tu as deux possibilités :

• soit faire une boucle sur tous les champs à désactiver et modifier la propriété disabled ;
• soit regrouper tous les champs dans un unique <fieldset> (qui sert à ça sémantiquement du reste) et modifier la propriété disabled du fieldset.

Je vais passer par une boucle mais j'ai un peu de mal à la faire
et l'autre solution avec mon code actuel ne conviens
quelqu'un pourrait-il me mettre sur un début de piste svp :)

Code:

---

1 2 3 4

var fieldList = document.getElementById('#Id de ton form').getElementByTagName('input'); for (var i=0; i < fieldList.length; i++) { fieldList[i].setAttribute('disabled', true) }

---

Voici un petit indice ;)
J'ai pas testé mais ça devrait marcher :O

Quelques remarques kaari.

Code:

---

document.getElementById('#idForm').getElementByTagName('input');

---

peut se résumer (sur les navigateurs compatibles) par

Code:

---

document.querySelectorAll('#idForm input');

---

;)

Code:

---

fieldList[i].setAttribute('disabled', true)

---

setAttribute() est un peu maladroit dans ce contexte : cette méthode sert à modifier un attribut HTML, or toi, tu veux affecter une propriété JavaScript (même si les deux sont liées), il est donc préférable d'utiliser la propriété JavaScript plutôt que l'attribut HTML

Code:

---

fieldList[i].disabled = true;

---

Merci de vos réponses c'est trop gentil !!!


j'ai testé mais ça grise que ma checkbox :/

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

tr <?php echo helper_alternate_class() ?>> <td class="category"> <?php print_documentation_link( 'cloture_FA' ) ?> </td> <td> <label><input <?php echo helper_get_tab_index()?> type="checkbox" id="cloture_FA" name="cloture_FA" onclick="DesactiverZoneTexte()"/> <?php echo lang_get( 'check_close' ) ?></label> </td> </tr>   <script type="text/javascript"> function DesactiverZoneTexte() { var fiedList = document.querySelectorAll('#form input'); for(var i=0;i<fiedList.length;i++) {   fiedList[i].disabled = true; } } </script>

---

Merci Bovino pour tes précisions. ;)

Juniordev c'est normal tu n'as aucun élément encapsulant ton formulaire avec l'id: "form".

Bah j'ai ajouté :

Code:

---

1 2 3 4 5

<form name="report_bug_form" id="form" method="post" <?php if ( $tpl_show_attachments ) { echo 'enctype="multipart/form-data"'; } ?> action="bug_report.php">   ... toutes mes fonctions php   </form>

---

ça fonctionne mais ça me grise ma checkbox et j'aimerais que quand on décoche les champs ne soient plus grisés :/