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

コード

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">グループ１</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">グループ２</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">グループ３</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">グループ４（このグループは使用しない）</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});

実現したい事

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

困っている事

下記の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が一番大きな数値に上書きされてしまいます。

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

hentaiman

2020/07/10 00:29

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

Keichi_Negishi

2020/07/10 01:33

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

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

回答3件

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

投稿2020/07/10 00:39

RickeyRising

総合スコア37

Keichi_Negishi

2020/07/10 01:30

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

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

ベストアンサー

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

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

投稿2020/07/10 00:38

Daregada

総合スコア11990

Keichi_Negishi

2020/07/10 01:32

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

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

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});