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

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

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

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

jQuery

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

Q&A

解決済

3回答

3745閲覧

1つのグループにつき1つまでしかチェックボックスを選択できないようにしたい

Keichi_Negishi

総合スコア24

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/07/10 00:25

コード

HTML5

1 2<!--中略 --> 3 4<div class="decide_wrapper"> 5 <div class="decide_area"> 6 <h2 class="decide_hd">サンプルタイトル</h2> 7 <div class="decide_inner"> 8 <div class="decide_block"> 9 <h3 class="number_1">グループ1</h3> 10 <div class="check_block check_block_1"> 11 <div class="check_block_inner"> 12 <label class="check_title"><input class="checkbox" type="checkbox" value="1_a">選択肢</label> 13 <label class="check_title"><input class="checkbox" type="checkbox" value="1_b">選択肢</label> 14 <label class="check_title"><input class="checkbox" type="checkbox" value="1_c">選択肢</label> 15 <label class="check_title"><input class="checkbox" type="checkbox" value="1_a">選択肢</label> 16 <label class="check_title"><input class="checkbox" type="checkbox" value="1_b">選択肢</label> 17 </div><!--/.check_block_inner --> 18 </div><!--/.check_block --> 19 </div><!--/.decide_block --> 20 21 <div class="decide_block"> 22 <h3 class="number_2">グループ2</h3> 23 <div class="check_block check_block_2"> 24 <div class="check_block_inner"> 25 <label class="check_title"><input class="checkbox" type="checkbox" value="2_a">選択肢</label> 26 <label class="check_title"><input class="checkbox" type="checkbox" value="2_b">選択肢</label> 27 <label class="check_title"><input class="checkbox" type="checkbox" value="2_a">選択肢</label> 28 <label class="check_title"><input class="checkbox" type="checkbox" value="2_b">選択肢</label> 29 <label class="check_title"><input class="checkbox" type="checkbox" value="2_b">選択肢</label> 30 </div><!--/.check_block_inner --> 31 </div><!--/.check_block --> 32 </div><!--/.decide_block --> 33 34 <div class="decide_block"> 35 <h3 class="number_3">グループ3</h3> 36 <div class="check_block check_block_3"> 37 <div class="check_block_inner"> 38 <label class="check_title"><input class="checkbox" type="checkbox" value="3_a">選択肢</label> 39 <label class="check_title"><input class="checkbox" type="checkbox" value="3_b">選択肢</label> 40 <label class="check_title"><input class="checkbox" type="checkbox" value="3_c">選択肢</label> 41 <label class="check_title"><input class="checkbox" type="checkbox" value="3_b">選択肢</label> 42 </div><!--/.check_block_inner --> 43 </div><!--/.check_block --> 44 </div><!--/.decide_block --> 45 46 <div class="decide_block"> 47 <h3 class="number_4">グループ4(このグループは使用しない)</h3> 48 <div class="check_block check_block_4"> 49 <div class="check_block_inner"> 50 <label class="check_title"><input class="checkbox" type="checkbox" disabled="disabled">選択肢</label> 51 <label class="check_title"><input class="checkbox" type="checkbox" disabled="disabled">選択肢</label> 52 <label class="check_title"><input class="checkbox" type="checkbox" disabled="disabled">選択肢</label> 53 </div><!--/.check_block_inner --> 54 </div><!--/.check_block --> 55 </div><!--/.decide_block --> 56 </div><!--/.decide_inner --> 57 58 <div class="btn_flex"> 59 <input type="button" class="btn result_btn" value="説明を見る"></button> 60 <input type="button" class="btn reset_btn" value="リセットする"></button> 61 </div><!--/.btn_flex --> 62 </div><!--/.decide_area --> 63 </div><!--/.decide_wrapper --> 64 65<!--中略 --> 66

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 32.decide_wrapper .decide_block:nth-last-of-type(1){ 33 border-right: none; 34} 35 36.decide_wrapper .decide_block .number_1, 37.decide_wrapper .decide_block .number_2, 38.decide_wrapper .decide_block .number_3, 39.decide_wrapper .decide_block .number_4{ 40 font-size: 20px; 41 position: relative; 42 font-weight: 500; 43 margin-bottom: 30px; 44} 45 46.decide_wrapper .decide_block .number_1::before{ 47 content: '01'; 48 color: #f5f3e2; 49 font-family: 'EB Garamond', serif; 50 font-size: 160px; 51 font-weight: 400; 52 position: absolute; 53 top: -10px; 54 left: 0; 55 z-index: -1; 56} 57 58.decide_wrapper .decide_block .number_2::before{ 59 content: '02'; 60 color: #f5f3e2; 61 font-family: 'EB Garamond', serif; 62 font-size: 160px; 63 font-weight: 400; 64 position: absolute; 65 top: -10px; 66 left: 0; 67 z-index: -1; 68} 69 70.decide_wrapper .decide_block .number_3::before{ 71 content: '03'; 72 color: #f5f3e2; 73 font-family: 'EB Garamond', serif; 74 font-size: 160px; 75 font-weight: 400; 76 position: absolute; 77 top: -10px; 78 left: 0; 79 z-index: -1; 80} 81 82.decide_wrapper .decide_block .number_4::before{ 83 content: '04'; 84 color: #f5f3e2; 85 font-family: 'EB Garamond', serif; 86 font-size: 160px; 87 font-weight: 400; 88 position: absolute; 89 top: -10px; 90 left: 0; 91 z-index: -1; 92} 93 94.decide_wrapper .check_title{ 95 display: block; 96 width: 100%; 97 margin-bottom: 20px; 98} 99 100.decide_wrapper .caution{ 101 font-size: 12px; 102 line-height: 20px; 103} 104 105.decide_wrapper .btn_flex{ 106 display: flex; 107 justify-content: center; 108 margin-bottom: 30px; 109} 110 111.decide_wrapper .btn_flex .btn{ 112 margin: 0; 113} 114 115.decide_wrapper .btn_flex .btn:nth-of-type(1){ 116 margin-right: 40px; 117}

jQuery

1$(function(){ 2 3//eachで、チェックボックスが効く範囲を限定する。 4$(".check_block").each(function(){ 5 $(this).find(".checkbox").on('click',function(){ 6 //全てのチェックボックスを外す 7 $(".checkbox").prop("checked",false); 8 //クリックしたチェックボックスをチェック 9 $(this).prop("checked", true); 10 }); 11});

実現したい事

1つのグループにつき1つまでしか、チェックボックスを選択できないようにしたいです。
最終的には、「結果を見る」ボタンを押すと、選択した内容に応じた文章が、ボタンの下辺りに出る仕組みを作りたいと思っています。
下の図のようなイメージです。
イメージ説明

困っている事

下記のJavaScriptのプログラムだと、全てのチェックボックスの内一つしか選択できないようになってしまいます。
$(".check_block_1")、$(".check_block_2")...の様に、グループ毎に名前を変更すれば実現できますが、これではコードが冗長過ぎます。

試した事

プログラム全体をfor(var i=1; i<3; i++){...}で囲み、クラス名をcheck_block_1,2,3...の様に変更するor「:nth-of-type(i)」の番号を変更する方法を試しました。しかしこれではiが一番大きな数値に上書きされてしまいます。

何か良い方法は無いでしょうか。
ご教示いただけますと幸いです。

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

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

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

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

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

hentaiman

2020/07/10 00:29

勉強目的ならともかくそうでないならラジオボタンにすればいい
Keichi_Negishi

2020/07/10 01:33

ご回答ありがとうございます。 ラジオボタンを使用する事にします。
guest

回答3

0

ラジオボタンを使用してください。

投稿2020/07/10 00:39

RickeyRising

総合スコア37

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

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

Keichi_Negishi

2020/07/10 01:30

ご回答ありがとうございます。 ラジオボタンを使用する事にします。
guest

0

ベストアンサー

利用目的からいっても、利用者のUIに対する混乱(通常チェックボックスは複数選択可能な項目に使われるため)を避けるためにも、ラジオボタンに変更することをお薦めします。

input要素のtype属性をradioにして、ひとつのグループ内で同じname属性を付けるだけで目的を達成できます。

投稿2020/07/10 00:38

Daregada

総合スコア11990

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

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

Keichi_Negishi

2020/07/10 01:32

ご回答ありがとうございます。 チェックボックスだと混乱を招くんですね。 ラジオボタンを使用する事にします。
guest

0

javascript

1$(function(){ 2 $('.checkbox').on('change',function(){ 3 $(this).closest('.check_block_inner').find('.checkbox').not(this).prop('disabled',$(this).prop('checked')); 4 }); 5});

投稿2020/07/10 01:18

yambejp

総合スコア114581

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

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

Keichi_Negishi

2020/07/10 01:33

コードまで記述して頂いてありがとうございます。 他の回答者の方が勧めている様に、今回はラジオボタンを使用する事にします。
yambejp

2020/07/10 01:35 編集

・ラジオボタンのような挙動(ただしチェックボッスなのではずせる?) ・一つ選ぶとほかを触れなくしたい (場合によっては2つとか3つとか選べる上限数をきめたい) などいくつか方法はあると思います > 今回はラジオボタンを使用 特殊な場合を除き、基本機能を利用するのはよい選択だと思います
Keichi_Negishi

2020/07/10 01:45

上限数を決めたい場合は確かにチェックボックスも良いですね。 今回はチェックボックスに拘る理由も無いのでラジオボタンにします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問