質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1314閲覧

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

Keichi_Negishi

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/07/13 02:32

編集2020/07/13 05:15

最終的に実現したい事

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

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

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

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

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

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

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">グループ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">選択肢1</label> 11 <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_b">選択肢2</label> 12 <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_c">選択肢3</label> 13 <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_a">選択肢4</label> 14 <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_b">選択肢5</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">グループ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">選択肢1</label> 24 <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢2</label> 25 <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_a">選択肢3</label> 26 <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢4</label> 27 <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢5</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">グループ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">選択肢1</label> 38 <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_b">選択肢2</label> 39 <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_c">選択肢3</label> 40 <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_b">選択肢4</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">グループ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">グループ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">グループ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 //3つのラジオボタン全てが選択された場合のみ、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

1に関してはgroup1~3に代入した直後にconsole.logで確認してみるとわかります。
中身は空白ではなくundefined(未定義)になっているはずです。
なので比較はundefined以外になります。
*0などが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

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

0

CSSだけでやったサンプル

投稿2020/07/13 03:23

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Keichi_Negishi

2020/07/13 05:18

コードの記述ありがとうございます。 私がやりたい事とは少し違うようです。上手く伝わっておらず申し訳ありません。 質問にも追記しましたが、3つの文章で1セットというイメージです。 画面に表示された説明は、リセットボタンを押さない限り変更できないようにしたいです。 よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問