Mettre les inputs d'une balise TR en checked false

Bonjour à tous,

Je croyais avoir saisi le principe (beaucoup de message, mais rien que j'arrive à adapter), mais visiblement j'ai pas la solution qui fonctionne, je viens donc vous solliciter pour une aide:

J'ai une extraction qui se fait d'une BDD dans un formulaire avec des boutons radios pour la selection, mais j'ai fais un exemple court représentatif sur 2 lignes:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<form> <table> <tr> <td><div class="form-radio"> <input type="radio" name="radel[]" id="btnradio" class="btnradio" value="" /> </div></td> <td><div class="box"> <input type="text" name="nom" placeholder="nom" class="inp_form" value="nom" disabled /> </div></td> <td><div class="box"> <input type="text" name="nom" placeholder="prenom" class="inp_form" value="prenom" disabled /> </div></td> <td><div class="box"> <input type="text" name="email" placeholder="email" class="inp_form" value="email" disabled /> </div></td> </tr> <tr> <td><div class="form-radio"><input type="radio" name="radel[]" id="btnradio2" class="btnradio" value="" /> </div></td> <td><div class="box"><input type="text" name="pseudo" placeholder="pseudo" class="inp_form" value="" id="" disabled /> </div></td> <td><div class="box"><input type="text" name="genre" placeholder="genre" class="inp_form" id="" disabled /> </div></td> </tr> </table> </form>

---

et le JS

Code:

---

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

// Sélection d'un bouton radio const btradios = document.querySelectorAll('input[type="radio"]');   btradios.forEach(radio => { radio.addEventListener('change', function() { const trElement = this.closest('tr'); // Selection de l'élement parent "tr"   if (this.checked === true) { // On active tous les champs de text input de l'élément tr trElement.querySelectorAll('input[type="text"]').forEach(input => { input.disabled = false; }); } if (checked === false){ // de-active tous les champs de text input de l'élément tr trElement.querySelectorAll('input[type="text"]').forEach(input => { input.disabled = true; }); } }); });

---

Cela ne fonctionne qu'à moitié, car lorsque je sélectionne un autre bouton radio, les inputs ne sont pas à nouveau disabled.
J'espère que mes explications sont compréhensibles. lol et par avance merci de vos aides.
JLuc

Bonjour,
déjà je pense qu'il te manque un this sur cette ligne :

Code:

---

if (checked === false){

---

ceci étant sur l'événement change tu ne passes que dans la condition this.checked === true, seul le radio cliqué est concerné.

Il te faut donc revoir ton approche !

Hello NoSmoking

Merci d'avoir apporté une réponse. Oui en effet, j'ai corrigé l'erreur. Merci

Alors, en fait, je sais plus trop quelle approche prendre ! Je suis un peu perdu.
Je pensais que le fait que cela soit dans une boucle règlerait le soucis !

JLuc

Il te faut effectivement une boucle pour traiter tous les type=""radio" qui ont le même name.
A chaque fois qu'il y en a un qui devient checked l'événement sera déclenché et uniquement pour celui checked, cela peut être déroutant mais les autres sont modifiés en « sous-marin » sans déclencher d'événement particulier.

Donc on affecte une fonction à tous les type=""radio" :

Code:

---

1 2 3 4

const btradios = document.querySelectorAll('input[type="radio"]'); btradios.forEach((el) => { el.addEventListener("change", activeLigne); });

---

... on utilise une fonction pour éviter de charger la mémoire, fonction qui pourrait ressembler à :

Code:

---

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

function activeLigne(e) { // récup du name const radioName = e.target.name; // récup tous les radios avec le même name const listRadio = document.querySelectorAll(`[name="${radioName}"]`); // on affecte suivant checked or not listRadio.forEach((radio) => { // récup. parent ligne const trParent = radio.closest("TR"); // récup. input de la ligne const inputs = trParent.querySelectorAll("input[type='text']"); inputs.forEach((el) => { el.disabled = !radio.checked; // ou avec set/remove Attribute }) }); }

---

... voir les commentaires.

Hello NoSmoking

En effet, l'approche est différente. J'ai bien lu tes commentaires ( et surtout compris).

Merci encore à toi.
Bonne journée
JLuc

A la relecture du code on aurait pu être plus concis !

Au lieu de :

Code:

---

1 2	// récup tous les radios avec le même name const listRadio = document.querySelectorAll(`[name="${radioName}"]`);

---

on aurait pu mettre :

Code:

---

1 2	// récup tous les radios avec le même name const listRadio = document.getElementsByName(radioName);

---

... c'est moins alambiqué et plus parlant :lol:

D'accord, je vais en tenir compte et modifier comme tel.
Merci beaucoup
JLuc