応募フォームの項目でラジオボタンの制御をjacascriptで行いたい

作成したい動作

1.ラジオボタンで設問1の3つの選択肢(A,B,C)から1つを選択
2.設問1でAを選んだ場合は設問2(D,E)が表示され、Bを選んだ場合は設問3(F,G)、Cを選んだ場合は設問4(H,I)が表示される。
3.設問2～4は問題の内容は違うがnameは一緒で2～4の中で選んだ一つの選択肢を取得したい。設問1はnameも格納場所も違う。
4.設問1でAを選択後、設問2でEを選択。その後に設問1でBを選択した場合は設問2で入力したデータをクリアしたい。

この動作を行いたいのですが、上手く動作しない部分が設問2～4が同じnameなので、設問4の答えしか取得してくれません。恐らく設問2や3で入力した答えを4で上書きしていると思うのですが、この部分をどうにかするjsを書きたいと考えています。
同じ名前の場合はチェックされている値のみを取得するようには出来ないのでしょうか？
また、設問1で選択するごとに1回1回設問2～4の値をクリアしたいのですが、これもどう書いたらいいか悩んでいます。
まだ何も完成していないのですが、作りかけのコードをのせますので、コードのご教授を頂けたらありがたいです。
question_1が設問1のname
question_2が設問2～4のname
select2から4がidで表示の切り替えを行うようにしています。

質問やコードの不備があると思いますが、本当に申し訳ありませんがご教授下さい。よろしくお願いします。

javascript
1
2$(function(){
3    $("input[name='data[Entry][question_1]']:radio").change(function() {
4        displayVals();
5    });
6    $(window).load(function () { displayVals();});
7    $("[name=data[Entry][question_2]]:checked").val()
8    function displayVals() {
9        var checkNum = $("input[name='data[Entry][question_1]']:checked").val();
10
11        if (checkNum == 1) {
12            $("#select2").show();
13            $("#select3").hide();
14            $("#select4").hide();
15        } else if (checkNum == 2) {
16            $("#select2").hide();
17            $("#select3").show();
18            $("#select4").hide();
19        } else if (checkNum == 3) {
20            $("#select2").hide();
21            $("#select3").hide();
22            $("#select4").show();
23        }
24        else {
25            $("#select2").hide();
26            $("#select3").hide();
27            $("#select4").hide();
28        }
29    }
30});

行動規範の内容に同意します

回答1件

ベストアンサー

show/hideするたびに各セレクションに対してfindでinput要素をつかんで
prop('disabled',true)してあげればnameの競合はさけられるでしょう

#sample
念のためsample

javascript
1<script>
2$(function(){
3  $('input[name=q1]').on('change',function(){
4    var v=$(this).filter(':checked').val();
5    $('#select2').toggle(v==1).find('input').prop('disabled',v!=1);
6    $('#select3').toggle(v==2).find('input').prop('disabled',v!=2);
7    $('#select4').toggle(v==3).find('input').prop('disabled',v!=3);
8  }).change();
9});
10</script>
11<form>
12<input type="radio" name="q1" value="1">1
13<input type="radio" name="q1" value="2">2
14<input type="radio" name="q1" value="3">3
15<br>
16<div id="select2">
17<input type="text" name="q2a" value="1"><br>
18<input type="text" name="q2b" value="2"><br>
19</div>
20<div id="select3">
21<input type="text" name="q2a" value="3"><br>
22<input type="text" name="q2b" value="4"><br>
23</div>
24<div id="select4">
25<input type="text" name="q2a" value="5"><br>
26<input type="text" name="q2b" value="6"><br>
27</div>
28<input type="submit" value="go">
29</form>
30