３つのラジオボタンを選択し、「説明を見る」ボタンを押すと３つの説明が出るプログラムを作りたい

最終的に実現したい事

グループ１からグループ３までのラジオボタンを選択し、「説明を見る」ボタンを押すと、ボタンの下に、ラジオボタンのグループに対応した文章が３つ出てくるようにしたいです。

実現したい事＆困っている事

（１）３つのラジオボタンを選択すると「説明を見る」ボタンのdisabledが解除される様にしたいのですが、１つのラジオボタンを選択しただけでdisabledが解除されてしまいます。
if(group1 != "" && group2 != "" && group3 != "")←これが機能していない理由が分かりません。

（２）「説明を見る」ボタンを押して下の方に説明が表示されている間は、ラジオボタンを選択できないようにしたいのですが、選択できてしまいます。なぜdisabledが効かないのでしょうか。

<追記>
・表示された説明は、それで１セットというイメージです。
既に表示された説明はリセットボタンを押さない限り、変更できないようにしたいです。

ご教示いただけますと幸いです。
よろしくお願いいたします。

html
1<!--中略 -->
2    <div class="decide_wrapper">
3      <div class="decide_area">
4        <h2 class="decide_hd">テストタイトル</h2>
5        <div class="decide_inner">
6          <div class="decide_block">
7            <h3 class="number_1">グループ１の見出し</h3>
8            <div class="radio_block radio_block_1">
9              <div class="radio_block_inner">
10                <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_a">選択肢１</label>
11                <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_b">選択肢２</label>
12                <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_c">選択肢３</label>
13                <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_a">選択肢４</label>
14                <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_b">選択肢５</label>
15              </div><!--/.radio_block_inner -->
16            </div><!--/.radio_block -->
17          </div><!--/.decide_block -->
18
19          <div class="decide_block">
20            <h3 class="number_2">グループ２の見出し</h3>
21            <div class="radio_block radio_block_2">
22              <div class="radio_block_inner">
23                <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_a">選択肢１</label>
24                <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢２</label>
25                <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_a">選択肢３</label>
26                <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢４</label>
27                <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢５</label>
28                <p class="caution">※注意点</p>
29              </div><!--/.radio_block_inner -->
30            </div><!--/.radio_block -->
31          </div><!--/.decide_block -->
32
33          <div class="decide_block">
34            <h3 class="number_3">グループ３の見出し</h3>
35            <div class="radio_block radio_block_3">
36              <div class="radio_block_inner">
37                <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_a">選択肢１</label>
38                <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_b">選択肢２</label>
39                <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_c">選択肢３</label>
40                <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_b">選択肢４</label>
41                <p class="caution">※注意点</p>
42              </div><!--/.radio_block_inner -->
43            </div><!--/.radio_block -->
44          </div><!--/.decide_block -->
45        </div><!--/.decide_inner -->
46
47      <div class="btn_flex">
48        <input type="button" class="btn result_btn disabled" value="説明を見る"></button>
49        <input type="button" class="btn reset_btn" value="リセットする"></button>
50      </div><!--/.btn_flex -->
51      <p class="explain">ボタンを押すと、上記のチェックに応じた内容が表示されます。</p><!--/.explain -->
52    </div><!--/.decide_area -->
53    </div><!--/.decide_wrapper -->
54
55    <div class="plan_wrapper">
56      <h2 class="plan_hd">テスト</h2>
57      <div class="plan_area">
58        <div class="plan_block plan_1_a">
59          <div class="contents">
60            <h3 class="number_1">グループ１</h3>
61            <div class="text_block">
62                <h4 class="text_hd">plan_1_aの見出し</h4>
63                <p class="text">plan_1_aダミーテキスト</p>
64              </div><!--/.text_block -->
65          </div><!--/.contents -->
66          <p class="contents_img"><img src="images/image_sample.jpg" alt="サンプル画像"></p>
67        </div><!--/.plan_block -->
68
69        <div class="plan_block plan_1_b">
70          <div class="contents">
71            <h3 class="number_1">グループ１</h3>
72            <div class="text_block">
73                <h4 class="text_hd">plan_1_bの見出し</h4>
74                <p class="text">plan_1_bダミーテキスト</p>
75              </div><!--/.text_block -->
76          </div><!--/.contents -->
77          <p class="contents_img"><img src="images/image_sample.jpg" alt="サンプル画像"></p>
78        </div><!--/.plan_block -->
79
80        <div class="plan_block plan_2_a">
81          <div class="contents">
82            <h3 class="number_2">グループ２</h3>
83            <div class="text_block">
84                <h4 class="text_hd">plan_2_a見出し</h4>
85                <p>plan_2_aダミーテキスト</p>
86              </div><!--/.text_block -->
87          </div><!--/.contents -->
88          <p class="contents_img"><img src="images/image_sample.jpg" alt="サンプル画像"></p>
89        </div><!--/.plan_block -->
90      </div><!--/.plan_area -->
91    </div><!--/.plan_wrapper -->
92  </section><!--/.dm_wrapper -->
93<!--中略 -->

CSS
1.decide_wrapper{
2  width: 1200px;
3  padding: 0 20px 80px;
4  margin: 0 auto;
5}
6
7.decide_wrapper .decide_area{
8  border: 1px solid #333;
9  padding: 80px 0;
10  width: 100%;
11}
12
13.decide_wrapper .decide_hd{
14  text-align: center;
15  padding-bottom: 80px;
16  font-size: 30px;
17  font-weight: 500;
18}
19
20.decide_wrapper .decide_inner{
21  display: flex;
22}
23
24.decide_wrapper .decide_block{
25  width: 25%;
26  max-width: 290px;
27  padding: 0 50px 0 40px;
28  border-right: 1px solid #333;
29  margin-bottom: 60px;
30}
31.decide_wrapper .radio_title{
32  display: block;
33  width: 100%;
34  margin-bottom: 20px;
35}
36
37.decide_wrapper .caution{
38  font-size: 12px;
39  line-height: 20px;
40}
41
42.decide_wrapper .btn_flex{
43  display: flex;
44  justify-content: center;
45  margin-bottom: 30px;
46}
47
48.decide_wrapper .btn_flex .btn{
49  margin: 0;
50}
51
52.decide_wrapper .explain{
53  text-align: center;
54  font-weight: 500;
55}
56
57.disabled{
58  border: 1px solid #ccc;
59}
60
61.disabled:hover{
62  background: none;
63  border: 1px solid #ccc;
64  color: #ccc;
65}
66
67.plan_wrapper{
68  width: 1200px;
69  margin: 0 auto;
70  padding: 0 20px;
71}
72
73.plan_wrapper .plan_hd{
74  font-size: 30px;
75  font-weight: 500;
76  padding-bottom: 70px;
77  text-align: center;
78}
79
80.plan_wrapper .plan_block{
81  margin-bottom: 40px;
82  padding-bottom: 40px;
83  border-bottom: 1px solid #333;
84  transition: .6s;
85  display: flex;
86}
87
88.plan_wrapper .number_2,
89.plan_wrapper .number_3{
90  padding-left: 30px;
91}
92
93.plan_wrapper .number_1::before{
94  content: '01';
95  color: #f5f3e2;
96  font-family: 'EB Garamond', serif;
97  font-size: 160px;
98  font-weight: 400;
99  position: absolute;
100  top: 0;
101  left: 0;
102  z-index: -1;
103}
104
105.plan_wrapper .number_2::before{
106  content: '02';
107  color: #f5f3e2;
108  font-family: 'EB Garamond', serif;
109  font-size: 160px;
110  font-weight: 400;
111  position: absolute;
112  top: 0;
113  left: 0;
114  z-index: -1;
115}
116
117.plan_wrapper .number_3::before{
118  content: '03';
119  color: #f5f3e2;
120  font-family: 'EB Garamond', serif;
121  font-size: 160px;
122  font-weight: 400;
123  position: absolute;
124  top: 0;
125  left: 0;
126  z-index: -1;
127}
128
129.plan_wrapper .contents{
130  display: flex;
131  align-items: flex-start;
132}
133
134.plan_wrapper .text_block{
135  width: 570px;
136}
137
138.plan_wrapper .contents_img{
139  margin-left: auto;
140}
141

jQuery
1$(function(){
2
3var planWrapper = $(".plan_wrapper");
4var planBlock = $(".plan_wrapper .plan_block");
5var planHd = $(".plan_wrapper .plan_hd");
6var resultBtn = $(".result_btn");
7var resetBtn = $(".reset_btn");
8var radioBtn =$(".radio");
9
10var group1;
11var group2;
12var group3;
13
14//表示結果の文章は最初は隠しておく
15planHd.hide();
16planBlock.hide();
17
18//disabledの付与
19resultBtn.prop('disabled',true);
20radioBtn.prop('disabled',false);
21
22//リセットボタン
23resetBtn.on('click',function(){
24  location.reload();
25});
26
27//ラジオボタンが選択されたのを検知。
28$("input:radio").change(function(){
29  //選択されたラジオボタンの値を取得。
30  group1 = $('input:radio[name="group_1"]:checked').val();
31  group2 = $('input:radio[name="group_2"]:checked').val();
32  group3 = $('input:radio[name="group_3"]:checked').val();
33
34 //３つのラジオボタン全てが選択された場合のみ、disabledを解除
35 if(group1 != "" && group2 != "" && group3 != ""){
36  resultBtn.prop('disabled', false);
37  resultBtn.removeClass('disabled');
38  console.log('成功');
39  }else{
40    console.log('失敗');
41  }
42
43});
44
45//結果を見るボタンを押したときの処理
46resultBtn.on('click',function(){
47
48  if(resultBtn.prop('disabled',true)){
49      $(this).prop('disabled', true);
50      $(this).addClass('disabled');
51  }
52
53  if(radioBtn.prop('disabled',false)){
54    $(this).prop('disabled',true);
55  }
56
57    scrollBy(0,600);
58
59    //ラジオボタンの値と一致したら、対応する文章をブラウザに表示
60    if(group1 == '1_a'){
61      $(".plan_1_a").fadeIn(1000);
62    }
63
64    if(group1 == '1_b'){
65      $(".plan_1_b").fadeIn(1000);
66    }
67
68    if(group1 == '1_c'){
69      $(".plan_1_c").fadeIn(1000);
70    }
71
72    if(group2 == '2_a'){
73      $(".plan_2_a").fadeIn(1000);
74    }
75
76    if(group2 == '2_b'){
77      $(".plan_2_b").fadeIn(1000);
78    }
79
80    if(group3 == '3_a'){
81      $(".plan_3_a").fadeIn(1000);
82    }
83
84    if(group3 == '3_b'){
85      $(".plan_3_b").fadeIn(1000);
86    }
87
88    if(group3 == '3_c'){
89      $(".plan_3_c").fadeIn(1000);
90    }
91
92    planWrapper.css('margin','0 auto 160px');
93
94});
95
96
97});
98

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

回答2件

ベストアンサー

1に関してはgroup1～3に代入した直後にconsole.logで確認してみるとわかります。
中身は空白ではなくundefined（未定義）になっているはずです。
なので比較はundefined以外になります。
＊０などがvalueの候補にないなら普通に group1 && group2 && group3でいい気がしますが

2はpropの使い方が間違っています。
if文の中でradioBtn.prop('disabled',false)を実行していますがこれですとradioBtnのdisabledにfalseをセットすることになります。radioBtn.prop('disabled')で取得した値をfalseと比較しましょう。
＊ここも別に比較でチェックしなくてもボタン押した時点でradioBtn.prop('disabled',true)ですべて使用不可でいいような気がしますが。

投稿2020/07/13 05:51

gogoweb_ikeda

総合スコア1426

Keichi_Negishi

2020/07/13 06:08

（１）おおー、確かにundefinedになっていますね！（２）>radioBtnのdisabledにfalseをセットすることになります。無い値に対してfalseをセットしようとしていた事になるんですね。 if文で無理に比較する必要も無い事もあるんですね。大変助かりました。ご丁寧に回答して頂きありがとうございます！

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