Discussion :

[gesualda]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[gesualda]

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[gesualda]

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

[NoSmoking]

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

Au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

on aurait pu mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[gesualda]

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