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

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

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

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

jQuery

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

解決済

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

Keichi_Negishi
Keichi_Negishi

総合スコア0

JavaScript

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

jQuery

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

2回答

0評価

0クリップ

603閲覧

投稿2020/07/13 02:32

編集2022/01/12 10:58

最終的に実現したい事

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

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

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

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

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

html

<!--中略 --> <div class="decide_wrapper"> <div class="decide_area"> <h2 class="decide_hd">テストタイトル</h2> <div class="decide_inner"> <div class="decide_block"> <h3 class="number_1">グループ1の見出し</h3> <div class="radio_block radio_block_1"> <div class="radio_block_inner"> <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_a">選択肢1</label> <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_b">選択肢2</label> <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_c">選択肢3</label> <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_a">選択肢4</label> <label class="radio_title"><input class="radio" type="radio" name="group_1" value="1_b">選択肢5</label> </div><!--/.radio_block_inner --> </div><!--/.radio_block --> </div><!--/.decide_block --> <div class="decide_block"> <h3 class="number_2">グループ2の見出し</h3> <div class="radio_block radio_block_2"> <div class="radio_block_inner"> <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_a">選択肢1</label> <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢2</label> <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_a">選択肢3</label> <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢4</label> <label class="radio_title"><input class="radio" type="radio" name="group_2" value="2_b">選択肢5</label> <p class="caution">※注意点</p> </div><!--/.radio_block_inner --> </div><!--/.radio_block --> </div><!--/.decide_block --> <div class="decide_block"> <h3 class="number_3">グループ3の見出し</h3> <div class="radio_block radio_block_3"> <div class="radio_block_inner"> <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_a">選択肢1</label> <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_b">選択肢2</label> <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_c">選択肢3</label> <label class="radio_title"><input class="radio" type="radio" name="group_3" value="3_b">選択肢4</label> <p class="caution">※注意点</p> </div><!--/.radio_block_inner --> </div><!--/.radio_block --> </div><!--/.decide_block --> </div><!--/.decide_inner --> <div class="btn_flex"> <input type="button" class="btn result_btn disabled" value="説明を見る"></button> <input type="button" class="btn reset_btn" value="リセットする"></button> </div><!--/.btn_flex --> <p class="explain">ボタンを押すと、上記のチェックに応じた内容が表示されます。</p><!--/.explain --> </div><!--/.decide_area --> </div><!--/.decide_wrapper --> <div class="plan_wrapper"> <h2 class="plan_hd">テスト</h2> <div class="plan_area"> <div class="plan_block plan_1_a"> <div class="contents"> <h3 class="number_1">グループ1</h3> <div class="text_block"> <h4 class="text_hd">plan_1_aの見出し</h4> <p class="text">plan_1_aダミーテキスト</p> </div><!--/.text_block --> </div><!--/.contents --> <p class="contents_img"><img src="images/image_sample.jpg" alt="サンプル画像"></p> </div><!--/.plan_block --> <div class="plan_block plan_1_b"> <div class="contents"> <h3 class="number_1">グループ1</h3> <div class="text_block"> <h4 class="text_hd">plan_1_bの見出し</h4> <p class="text">plan_1_bダミーテキスト</p> </div><!--/.text_block --> </div><!--/.contents --> <p class="contents_img"><img src="images/image_sample.jpg" alt="サンプル画像"></p> </div><!--/.plan_block --> <div class="plan_block plan_2_a"> <div class="contents"> <h3 class="number_2">グループ2</h3> <div class="text_block"> <h4 class="text_hd">plan_2_a見出し</h4> <p>plan_2_aダミーテキスト</p> </div><!--/.text_block --> </div><!--/.contents --> <p class="contents_img"><img src="images/image_sample.jpg" alt="サンプル画像"></p> </div><!--/.plan_block --> </div><!--/.plan_area --> </div><!--/.plan_wrapper --> </section><!--/.dm_wrapper --> <!--中略 -->

CSS

.decide_wrapper{ width: 1200px; padding: 0 20px 80px; margin: 0 auto; } .decide_wrapper .decide_area{ border: 1px solid #333; padding: 80px 0; width: 100%; } .decide_wrapper .decide_hd{ text-align: center; padding-bottom: 80px; font-size: 30px; font-weight: 500; } .decide_wrapper .decide_inner{ display: flex; } .decide_wrapper .decide_block{ width: 25%; max-width: 290px; padding: 0 50px 0 40px; border-right: 1px solid #333; margin-bottom: 60px; } .decide_wrapper .radio_title{ display: block; width: 100%; margin-bottom: 20px; } .decide_wrapper .caution{ font-size: 12px; line-height: 20px; } .decide_wrapper .btn_flex{ display: flex; justify-content: center; margin-bottom: 30px; } .decide_wrapper .btn_flex .btn{ margin: 0; } .decide_wrapper .explain{ text-align: center; font-weight: 500; } .disabled{ border: 1px solid #ccc; } .disabled:hover{ background: none; border: 1px solid #ccc; color: #ccc; } .plan_wrapper{ width: 1200px; margin: 0 auto; padding: 0 20px; } .plan_wrapper .plan_hd{ font-size: 30px; font-weight: 500; padding-bottom: 70px; text-align: center; } .plan_wrapper .plan_block{ margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #333; transition: .6s; display: flex; } .plan_wrapper .number_2, .plan_wrapper .number_3{ padding-left: 30px; } .plan_wrapper .number_1::before{ content: '01'; color: #f5f3e2; font-family: 'EB Garamond', serif; font-size: 160px; font-weight: 400; position: absolute; top: 0; left: 0; z-index: -1; } .plan_wrapper .number_2::before{ content: '02'; color: #f5f3e2; font-family: 'EB Garamond', serif; font-size: 160px; font-weight: 400; position: absolute; top: 0; left: 0; z-index: -1; } .plan_wrapper .number_3::before{ content: '03'; color: #f5f3e2; font-family: 'EB Garamond', serif; font-size: 160px; font-weight: 400; position: absolute; top: 0; left: 0; z-index: -1; } .plan_wrapper .contents{ display: flex; align-items: flex-start; } .plan_wrapper .text_block{ width: 570px; } .plan_wrapper .contents_img{ margin-left: auto; }

jQuery

$(function(){ var planWrapper = $(".plan_wrapper"); var planBlock = $(".plan_wrapper .plan_block"); var planHd = $(".plan_wrapper .plan_hd"); var resultBtn = $(".result_btn"); var resetBtn = $(".reset_btn"); var radioBtn =$(".radio"); var group1; var group2; var group3; //表示結果の文章は最初は隠しておく planHd.hide(); planBlock.hide(); //disabledの付与 resultBtn.prop('disabled',true); radioBtn.prop('disabled',false); //リセットボタン resetBtn.on('click',function(){ location.reload(); }); //ラジオボタンが選択されたのを検知。 $("input:radio").change(function(){ //選択されたラジオボタンの値を取得。 group1 = $('input:radio[name="group_1"]:checked').val(); group2 = $('input:radio[name="group_2"]:checked').val(); group3 = $('input:radio[name="group_3"]:checked').val(); //3つのラジオボタン全てが選択された場合のみ、disabledを解除 if(group1 != "" && group2 != "" && group3 != ""){ resultBtn.prop('disabled', false); resultBtn.removeClass('disabled'); console.log('成功'); }else{ console.log('失敗'); } }); //結果を見るボタンを押したときの処理 resultBtn.on('click',function(){ if(resultBtn.prop('disabled',true)){ $(this).prop('disabled', true); $(this).addClass('disabled'); } if(radioBtn.prop('disabled',false)){ $(this).prop('disabled',true); } scrollBy(0,600); //ラジオボタンの値と一致したら、対応する文章をブラウザに表示 if(group1 == '1_a'){ $(".plan_1_a").fadeIn(1000); } if(group1 == '1_b'){ $(".plan_1_b").fadeIn(1000); } if(group1 == '1_c'){ $(".plan_1_c").fadeIn(1000); } if(group2 == '2_a'){ $(".plan_2_a").fadeIn(1000); } if(group2 == '2_b'){ $(".plan_2_b").fadeIn(1000); } if(group3 == '3_a'){ $(".plan_3_a").fadeIn(1000); } if(group3 == '3_b'){ $(".plan_3_b").fadeIn(1000); } if(group3 == '3_c'){ $(".plan_3_c").fadeIn(1000); } planWrapper.css('margin','0 auto 160px'); }); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

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