Discussion :

[scriptophage]

Bonjour,
j'ai réalisé l'aspect "Front" d'un tarificateur en ligne (un grand formulaire divisé en cinq étapes)
Ces cinq étapes (step#1 situation / step#2 besoins / ext...) s'affichent successivement, tout est, pour l"heure, réalisé en jquery. jusqu'ici, aucun problème

Je suis pourtant confronté à un bug,et je n'arrive pas à comprendre d'ou cela vient :
A l'étape #2, j'ai cinq listes affichant chacune une série de trois boutons radios. Tous ces boutons radios sont censés interagir sur d'autres boutons radios à l'étape #3...Seulement , à l'étape #3, lorsque je re-clique sur un bouton radio désactivé en js via .prop() et/ou removeAttr(), il reste actif au clic, et je me retrouve avec plusieurs radios checkés, censés être à choix unique...

Le tout est réalisé pour l'instant sous forme d'une série de conditions, comme ceci :

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
$(".form-devis .check-option input").click(function(){
 
         var title = $('div.modal-header .devis');
         var optionTitle = $(this).parent().parent().parent().prev(title).text();
         var m1 = $('#m1');
 
         alert( optionTitle + $(this).prop('checked',true).val());
 
          if($(m1).val() == "moyen"){ //Si la valeur de mon bouton est "moyen"
              $("#opt3").prop('checked', true); //L'option 3  de l'étape suivante est activée
              $('#opt3').parent('label').siblings().children('input').prop('checked',false); //Les boutons radio frères et soeurs sont désactivés
              $("#opt3").parent('label').addClass('option-checked');
              $("#opt3").parent('label').siblings().removeClass('option-checked');
          }
      });

Voici à quoi ressemble les séries de bouton radio côté html à l'étape 2:

Code html :

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

1
2
3
4
5
6
7
      <div class="content-form form-devis">
              <div class="row option-row">
                  <label class="check-option"><input id="f1" type="radio" name="medecine" value="faible" checked> Faible</label>
                  <label class="check-option"><input id="m1" type="radio" name="medecine" value="moyen"> Moyen</label>
                 <label class="check-option"><input id="e1" type="radio" name="medecine" value="eleve"> Elevé</label>
             </div>
       </div>

Et Voici une des listes de bouton radio à l'étape 3 , interagissant avec l'étape 2, qui reffusent de se décocher au clic lorsqu'ils sont dynamiquement modifiés en js:

Code html :

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

1
2
3
4
5
6
<li class="choices">
    <label class="check-option two lowercase"><input id="opt1" type="radio" name="option" value="aucun" checked> Aucun</label>
    <label class="check-option two lowercase"><input id="opt2" type="radio" name="option" value="opt2"> Option2</label>
    <label class="check-option two lowercase"><input id="opt3" type="radio" name="option" value="opt3"> Option3</label>
    <label class="check-option two lowercase"><input id="opt4" type="radio" name="option" value="opt4"> Option4</label>
</li>

Si quelqu'un à déjà rencontré ce problème de bouton radio à choix unique qui accepte de se cocher/ décocher via js et reffuse de le faire au clic, et se sent l'âme charitable pour m'aider

Pour info j'ai tenté removeAttr('checked' , 'checked'); // Même résultat que .prop('checked' , false);, le bouton radio reste coché une fois que je reclique manuellement dessus. ...là je sèche !

je vous prie de m'excuser par avance si le code js n'est pas encore optimisé, j'ai essayé d'être le plus clair possible, il s'agit , dans un premier temps, d'un principe de base avant de le peaufiner.

d'avance,

[scriptophage]

Problème résolu
Désolé je n'avais pas fait attention, le problème venait de mes input="name"; qui n'étaient pas identiques sur mes radios..(d'ou le fait que plusieurs étaient "cochables" simultanément... (c'est dans ces moments là que l'on se sent "bête" lol)