JavaScript ラジオボタン複数（name複数）　制御

前提・実現したいこと

htmlにてアンケートを作成しているのですが，
その中でradioボタンを複数（name複数）の項目を作成し，
4以外を1つでも回答した場合はQ3，Q4のdisabledをfalseにして，
4しか回答がない場合はそのままdisabledをtrueにする動きをしたいです。

発生している問題・エラーメッセージ

現状4以外を1つでも選択した場合はQ3,Q4のdisabledを解除できているのですが，
4を再度選択した際にdisabledがtrueにならず，回答できる状態になります。

該当のソースコード

html/javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <script src="/webjars/jquery/1.11.1/jquery.min.js"></script>
8    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
9            th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
10    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
11            th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}"/>
12    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
13</head>
14<body>
15    <table border="1">
16        <thead>
17            <!-- 6 -->
18            <tr>
19                <th colspan="2"></th>
20                <th width="60">された<br>ことが<br>ある</th>
21                <th width="60">した<br>こと<br>がある</th>
22                <th width="60">見聞き<br>したこと<br>がある</th>
23                <th width="60">ない</th>
24            </tr>
25        </thead>
26        <tbody>
27            <tr>
28                <td>1</td>
29                <td>Q1</td>
30                <td><label><input type="radio" name="q1" class="not4"required>1</label></td>
31                <td><label><input type="radio" name="q1" class="not4">2</label></td>
32                <td><label><input type="radio" name="q1" class="not4">3</label></td>
33                <td><label><input type="radio" name="q1" ></label>4</td>
34            </tr>
35            <tr>
36                <td>2</td>
37                <td>Q2</td>
38                <td><label><input type="radio" name="q2" class="not4"required>1</label></td>
39                <td><label><input type="radio" name="q2" class="not4">2</label></td>
40                <td><label><input type="radio" name="q2" class="not4">3</label></td>
41                <td><label><input type="radio" name="q2" >4</label></td>
42            </tr>
43            <tr>
44                <td>3</td>
45                <td>Q3</td>
46                <td><label><input type="radio" name="q3" class="not4"required>1</label></td>
47                <td><label><input type="radio" name="q3" class="not4">2</label></td>
48                <td><label><input type="radio" name="q3" class="not4">3</label></td>
49                <td><label><input type="radio" name="q3" >4</label></td>
50            </tr>
51            <tr>
52                <td>4/td>
53                <td>Q4</td>
54                <td><label><input type="radio" name="q4" class="not4"required>1</label></td>
55                <td><label><input type="radio" name="q4" class="not4">2</label></td>
56                <td><label><input type="radio" name="q4" class="not4">3</label></td>
57                <td><label><input type="radio" name="q4" >4</label></td>
58            </tr>
59        </tbody>
60    </table>
61    </br>
62    <h3>上記「４以外」を回答した方</h3>
63    <h3>Q3（複数回答可）</h3>
64    <div>
65        <p>
66            <label><input type="checkbox" name="Q3" class="q3" required value=""/>a</label>
67            <label><input type="checkbox" name="Q3" class="q3" value=""/>y</label>
68            <label><input type="checkbox" name="Q3" class="q3" value=""/>o</label>
69            <label><input type="checkbox" name="Q3" class="q3" value=""/>y</label>
70            <label><input type="checkbox" name="Q3" class="q3" value=""/>g</label>
71            <label><input type="checkbox" name="Q3" class="q3" id="q3_other" value=""/><textarea name="Q3" class="q3" required id="q3other_text" cols="30" rows="1"></textarea></label>
72        </p>
73    </div>
74    <div>
75        <h3>Q4 (複数回答可）</h3>
76        <div>
77            <p>
78                <label><input type="checkbox" name="Q4" class="q4" required value="10代"/>10代</label>
79                <label><input type="checkbox" name="Q4" class="q4" value="20代"/>20代</label>
80                <label><input type="checkbox" name="Q4" class="q4" value="見聞きしたことがある0代"/>30代</label>
81                <label><input type="checkbox" name="Q4" class="q4" value="40代"/>40代</label>
82                <label><input type="checkbox" name="Q4" class="q4" value="50代"/>50代</label>
83                <label><input type="checkbox" name="Q4" class="q4" value="60代以上"/>60代以上</label>
84            </p>
85        </div>
86    </div>
87<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
88		th:src="@{/webjars/jquery/1.11.3/jquery.min.js}"></script>
89<script type="text/javascript">
90"use strict";
91$("input[name ='Q3']").prop("disabled",true);
92$("input[name ='Q4']").prop("disabled",true);
93$("#q3other_text").prop("disabled",true);
94$("#q3_other").click(function(){
95    if($(this).is(':checked')){
96        $("#Q3other_text").prop("disabled",false);
97    }else{
98        $("#Q3other_text").prop("disabled",true);
99    }
100});
101var q2checkedsum;
102$(".not4").on("change",function(){
103    q2checkedsum　=(".not4:checked").length;
104    if(q2checkedsum > 0){
105        $("input[name ='Q3']").prop("disabled",false);
106        $("input[name ='Q4']").prop("disabled",false);
107    }else if(!q2checkedsum == 0){
108        $("input[name ='Q3']").prop("disabled",true);
109        $("input[name ='Q4']").prop("disabled",true);
110    }
111});
112
113var q3checkedsum;
114$(".q3").on("click",function(){
115    q3checkedsum = $(".q3:checked").length;//チェックされているチェックボックスの数を取得
116    if(q3checkedsum > 0){
117        $(".q3").prop("required",false);
118    }else{
119        $(".q3").prop("required",true);
120    }
121});
122
123var q4checkedsum;
124$(".q4").on("click",function(){
125    q4checkedsum = $(".q4:checked").length;//チェックされているチェックボックスの数を取得
126    if(q4checkedsum > 0){
127        $(".q4").prop("required",false);
128    }else{
129        $(".q4").prop("required",true);
130    }
131});
132
133
134</script>
135</body>
136</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2020/06/01 01:48

name=q3/q4とclass=q3/q4がそれぞれ連動するのでしょうか？それともname=q1/q2/q3/q4をすべてみてclass=q3/q4がすべて連動するのでしょうか？

3hawks25

2020/06/01 01:55

質問ありがとうございます。私としてはclass=Q3,Q4を連動させようとしていました。根本はQ3,Q4を回答させるためには，tableの各質問項目の4番以外を選択した際に解除して，4番しかない場合は解除しないようにする方法を探っています。より簡潔に済ませる方法があるのであれば，ご教授願いたいです。

3hawks25

2020/06/01 02:28

回答ありがとうございます。大変申し訳ございません。私の説明が不足とname,classのめいめいの仕方が悪かったと思います。回答いただいたソースですと，tableのQ3，Q4が変化した際に大問のQ3Q4が解放される形となります。大変申し訳ございません。やりたいこととしては，tableの小問Q1~4の中で，ラジオボタンの4番以外を1つでも回答した際に，大問Q3，Q4を開放し，ラジオボタンのすべてが4番の場合は大問Q3，Q4は開放しないように動かしたかったのです。作成していただいて大変申し訳ございません。

yambejp

2020/06/01 02:38

個別の回答に対するコメントは、回答自体にコメントでつけてください

coco_bauer

2020/06/01 02:45

画面に同じ表記(Q3とかQ4とか)が複数使われている時点で、質問票としては落第だと思います。回答者に誤解を与えないようにするのは、アンケートの基本中の基本ですから。そういう回答者の視点に立って見直すと、もっと見通しの良いHTMLになるでしょうし、teratailの解消者が混乱しなくて済むと思います。

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

回答1件

ベストアンサー

javascript
1$(function(){
2  $('[name=q3],[name=q4]').on('change',function(){
3    var flg=$('[name='+$(this).attr('name')+'].not4:checked').length==0;
4    $('.'+$(this).attr('name')).prop('disabled',flg);
5  }).filter(':not(.not4)').trigger('change');
6});

投稿2020/06/01 02:07

yambejp

総合スコア116724

yambejp

2020/06/01 02:37 編集

新しい説明に合わせるとこんな感じ？ $(function(){ $('[name^=q]').on('change',function(){ var flg=$('.not4:checked').length==0; $('.q3,.q4').prop('disabled',flg); }).eq(0).trigger('change'); });

3hawks25

2020/06/01 02:46

回答に対する使い方を教えて頂きありがとうございました。今後気をつけます。回答頂いたソースの通りでした。自分なりに再度勉強して，今後に活かさせていただきます。ありがとうございました。

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