javascript: チェックボックスのチェックを全部外すボタンとチェックを一つずつ外した時の機能の違い

教えていただいたコードを参考にclass groupで選択した文字列を配列に入れ、配列番号に応じてshow1~~4に文字列を表示し、チェックが外れたらshow1~~4からも消えるというコードを表示しました。HTMLの選択した技を解除するというボタンを押したら全てのチェックが外れ、show1~4からも表示がきえるという機能を持ったコードを表示しました。checkboxを10個までしかチェック出来ないという制限を付けると、解除ボタンを押した後に新しい技を選ぼうとするとチェック出来なくなってしまいます。原因を教えていただけないでしょうか。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title></title>
6    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
7    <script>
8    $(function() {
9
10        var max_checked=10;
11        $(function(){
12        $('input').on('change',function(){
13        var flg=$(this).closest('.group').find(':input:checked').length>=max_checked;
14        $(this).closest('.group').find(':input:not(:checked)').prop('disabled',flg);
15        });
16        });
17
18
19        $('.group input').on('change',function(){
20         $(this).closest('label').attr('data-date',$(this).is(':checked')?new Date().getTime():null);
21          var order=$('.group label[data-date]').sort(function(x,y){
22          return $(x).attr('data-date')-$(y).attr('data-date');
23          }).map(function(){
24          return $(this).text();
25          }).get();
26         $.each([0,1,2,3,4,5,6,7,8,9],function(){
27         $('#show'+($(this).get(0)+1)).text(order[$(this).get(0)]||"");
28         });
29         $('.all_delete').on('click',function(){
30   　　   $('.group :checkbox:checked').prop('checked',false);
31    　　  $('[id^=show]').text("");
32         $('.group label[data-date]').attr('data-date',null);
33        　   });
34           }); 
35         });
36
37    　　　 
38
39
40
41    </script>
42</head>
43<body>
44 <div class="top">
45
46   <div class="top_graph">
47     <table border="" class = "graph">
48    <tr>
49        <th colspan=4 height="10%">選択済み</th>
50        
51    </tr>
52      <tr align="center">
53            <td width = "10%">1</td>
54            <td width = "40%">
55               <span id="show1"></span>
56            </td>
57            <td width = "10%">6</td>
58            <td width = "40%">
59               <span id="show6"></span>
60            </td>
61      </tr> 
62      <tr align="center">
63            <td width = "10%">2</td>
64            <td width = "40%">
65               <span id="show2"></span>
66            </td>
67            <td width = "10%">7</td>
68            <td width = "40%">
69               <span id="show7"></span>
70            </td>
71      </tr>  
72      <tr align="center">
73            <td width = "10%">3</td>
74            <td width = "40%">
75               <span id="show3"></span>
76            </td>
77            <td width = "10%">8</td>
78            <td width = "40%">
79               <span id="show8"></span>
80            </td>
81      </tr> 
82      <tr align="center">
83            <td width = "10%">4</td>
84            <td width = "40%">
85               <span id="show4"></span>
86            </td>
87            <td width = "10%">9</td>
88            <td width = "40%">
89               <span id="show9"></span>
90            </td>
91      </tr> 
92      <tr align="center">
93            <td width = "10%">5</td>
94            <td width = "40%">
95               <span id="show5"></span>
96            </td>
97            <td width = "10%">10</td>
98            <td width = "40%">
99               <span id="show10"></span>
100            </td>
101      </tr> 
102  </table>
103  </div>
104 <a class = "btn all_delete">選択した技を解除</a>
105  </div>
106  <div class ="group">
107    <div class= "group1">
108    <table border="" width="840px" height="700" class = "graph_s">
109        <tr><th colspan=6 height="10%" ></th></tr>
110        <tr width="16%" height="10%">
111            <th></th><th></th><th></th><th>
112            </th><th></th><th></th>
113        </tr>
114        <tr align="center">
115            <td>
116                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
117            </td>
118            <td>
119               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
120            </td>
121            <td>
122               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
123            <td>
124               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
125            </td>
126            <td>
127               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
128            </td>
129            <td>
130                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
131            </td>
132        </tr>
133　　　　 <tr align="center">
134            <td>
135                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
136            </td>
137            <td>
138               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
139            </td>
140            <td>
141               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
142            <td>
143               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
144            </td>
145            <td>
146               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
147            </td>
148            <td>
149                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
150            </td>
151        </tr>
152　　　   <tr align="center">
153            <td>
154                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
155            </td>
156            <td>
157               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
158            </td>
159            <td>
160               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
161            <td>
162               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
163            </td>
164            <td>
165               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
166            </td>
167            <td>
168                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
169            </td>
170        </tr>
171        <tr align="center">
172            <td>
173                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
174            </td>
175            <td>
176               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
177            </td>
178            <td>
179               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
180            <td>
181               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
182            </td>
183            <td>
184               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
185            </td>
186            <td>
187                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
188            </td>
189        </tr>
190        <tr align="center">
191            <td>
192                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
193            </td>
194            <td>
195               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
196            </td>
197            <td>
198               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
199            <td>
200               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
201            </td>
202            <td>
203               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
204            </td>
205            <td>
206                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
207            </td>
208        </tr>
209        <tr align="center">
210            <td>
211                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
212            </td>
213            <td>
214               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
215            </td>
216            <td>
217               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
218            <td>
219               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
220            </td>
221            <td>
222               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
223            </td>
224            <td>
225                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
226            </td>
227        </tr>
228
229    </table>
230</div>
231</div>
232<script src="script.js"></script>
233</body>
234</html>

yambejp

2019/07/03 02:09

質問の際はご自身の環境にソースをコピペして画面を確認したほうがよいでしょう明らかにおかしな表示になっていますあと、全角のスペースをインデントに使っている箇所が散見されますが場合によってはエラーに直結することもあるのできちんと検証したほうがよいですよ

kuuuuuya

2019/07/03 05:29

ご指摘ありがとうございます。修正致しました、以後気をつけます。

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

回答1件

ベストアンサー

$('.all_delete')のくだりにdisabledの解除を入れてください

javacript
1    $('.all_delete').on('click',function(){
2      $('.group :checkbox:checked').prop('checked',false);
3      $('[id^=show]').text("");
4      $('.group label[data-date]').attr('data-date',null);
5      $('.group').find(':checkbox:disabled').prop('disabled',false);
6    });

投稿2019/07/03 00:46

yambejp

総合スコア114968

kuuuuuya

2019/07/03 01:15

なるほど、ありがとうございます！すごく私的な質問になってしまうんですが、yambejpさんはjQuery,jsをどうやって勉強されましたか？私はプロゲートで勉強しているんですが、もっと問題をコードを書きながら解いていく方式で勉強したいと思っているのですが、なかなかそういった教材が見つからなくて、、

yambejp

2019/07/03 01:24

> どうやって勉強されましたか？難しい質問ですね・・・ jQueryは実は大キライでずっと避けてきたんですが teratailでjsの回答をする中で困っている人が多かったので覚えましたなので歴としては2年位ですかね・・・ jsはインターネットの黎明期から折りに触れさわっているので慣れとしか言えません。あまり参考にならないと思います。すみません

kuuuuuya

2019/07/03 02:04

いえいえ！いつも本当に丁寧に回答して下さってありがとうございます。

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