下記のclass = group12のチェックボックスをチェックしたテキストをshow110に表示し、「選択した技を解除」ボタンを押すとチェックを外す関数を記しました。$.each(order,function()~において、num_possible=3を定義し、配列orderの先頭の要素から順に、G2クラスを持っていたらnum_possible-=1し、cutクラスを持っていたらnum_possibleを3に戻し、num_possible=0になったらチェックされていないG2クラスのチェックされていないチェックボックスをチェック不可にする関数を書いたのですが、num_possibleが変更されません。どなたか原因を教えていただけませんか?
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 $('.group input').on('change',function(){ 10 $(this).closest('label').attr('data-date',$(this).is(':checked')?new Date().getTime():null); 11 var order=$('.group label[data-date]').sort(function(x,y){ 12 return $(x).attr('data-date')-$(y).attr('data-date'); 13 }).map(function(){ 14 return $(this).text(); 15 }).get(); 16 console.log(order); 17 console.log(order[1]); 18 $.each(order,function(){ 19 var num_possible = 3; 20 var power = $("input[type=checkbox]:checked").hasClass("G2"); 21 var cut = $("input[type=checkbox]:checked").hasClass("cut"); 22 if(power){ 23 num_possible -= 1; 24 }else if(cut){ 25 num_possible = 3; 26 } 27 if(num_possible == 0){ 28 $("input[type=checkbox].G2:not(:checked)").prop("disabled",true); 29 30 } 31 console.log(num_possible); 32 }); 33 $.each([0,1,2,3,4,5,6,7,8,9],function(){ 34 $('#show'+($(this).get(0)+1)).text(order[$(this).get(0)]||""); 35 }); 36 $('.all_delete').on('click',function(){ 37 $('.group :checkbox:checked').prop('checked',false); 38 $('[id^="show"]').text(""); 39 $('.group label[data-date]').attr('data-date',null); 40 $('.group').find(':checkbox:disabled').prop('disabled',false); 41 $('#all_total').text(0); 42 $('#waza_total').text(0); 43 $('#group_total').text(0); 44 }); 45 }); 46 47}); 48 49 50 51 52 53 54 55 </script> 56</head> 57<body> 58 <div class="top"> 59 60 <div class="top_graph"> 61 <table border="" class = "graph"> 62 <tr> 63 <th colspan=4 height="10%">選択済み</th> 64 65 </tr> 66 <tr align="center"> 67 <td width = "10%">1</td> 68 <td width = "40%"> 69 <span id="show1"></span> 70 </td> 71 <td width = "10%">6</td> 72 <td width = "40%"> 73 <span id="show6"></span> 74 </td> 75 </tr> 76 <tr align="center"> 77 <td width = "10%">2</td> 78 <td width = "40%"> 79 <span id="show2"></span> 80 </td> 81 <td width = "10%">7</td> 82 <td width = "40%"> 83 <span id="show7"></span> 84 </td> 85 </tr> 86 <tr align="center"> 87 <td width = "10%">3</td> 88 <td width = "40%"> 89 <span id="show3"></span> 90 </td> 91 <td width = "10%">8</td> 92 <td width = "40%"> 93 <span id="show8"></span> 94 </td> 95 </tr> 96 <tr align="center"> 97 <td width = "10%">4</td> 98 <td width = "40%"> 99 <span id="show4"></span> 100 </td> 101 <td width = "10%">9</td> 102 <td width = "40%"> 103 <span id="show9"></span> 104 </td> 105 </tr> 106 <tr align="center"> 107 <td width = "10%">5</td> 108 <td width = "40%"> 109 <span id="show5"></span> 110 </td> 111 <td width = "10%">10</td> 112 <td width = "40%"> 113 <span id="show10"></span> 114 </td> 115 </tr> 116 </table> 117 </div> 118 <a class = "btn all_delete">選択した技を解除</a> 119 </div> 120 <div class ="group"> 121 <div class= "group1"> 122 <table border="" width="840px" height="700" class = "graph_s"> 123 <tr><th colspan=6 height="10%" ></th></tr> 124 <tr width="16%" height="10%"> 125 <th></th><th></th><th></th><th> 126 </th><th></th><th></th> 127 </tr> 128 <tr align="center"> 129 <td> 130 <label><input type="checkbox" class="G1 cut" value="0.1" >aaa</label> 131 </td> 132 <td> 133 <label><input type="checkbox" class="G1 cut" value="0.2" >bbb</label> 134 </td> 135 <td> 136 <label><input type="checkbox" class="G1 cut" value="0.3" >ccc</label> 137 <td> 138 <label><input type="checkbox" class="G1 cut" value="0.4" >ddd</label> 139 </td> 140 <td> 141 <label><input type="checkbox" class="G1 cut" value="0.5" >eee</label> 142 </td> 143 <td> 144 <label><input type="checkbox" class="G1 cut" value="0.6" >fff</label> 145 </td> 146 </tr> 147 <tr align="center"> 148 <td> 149 <label><input type="checkbox" class="G1 cut" value="0.1" >aaa</label> 150 </td> 151 <td> 152 <label><input type="checkbox" class="G1 cut" value="0.2" >bbb</label> 153 </td> 154 <td> 155 <label><input type="checkbox" class="G1 cut" value="0.3" >ccc</label> 156 <td> 157 <label><input type="checkbox" class="G1" value="0.4" >ddd</label> 158 </td> 159 <td> 160 <label><input type="checkbox" class="G1" value="0.5" >eee</label> 161 </td> 162 <td> 163 <label><input type="checkbox" class="G1" value="0.6" >fff</label> 164 </td> 165 </tr> 166 <tr align="center"> 167 <td> 168 <label><input type="checkbox" class="G1" value="0.1" >aaa</label> 169 </td> 170 <td> 171 <label><input type="checkbox" class="G1" value="0.2" >bbb</label> 172 </td> 173 <td> 174 <label><input type="checkbox" class="G1" value="0.3" >ccc</label> 175 <td> 176 <label><input type="checkbox" class="G1" value="0.4" >ddd</label> 177 </td> 178 <td> 179 <label><input type="checkbox" class="G1" value="0.5" >eee</label> 180 </td> 181 <td> 182 <label><input type="checkbox" class="G1" value="0.6" >fff</label> 183 </td> 184 </tr> 185 186 </table> 187</div> 188<div class= "group2"> 189 <table border="" width="840px" height="700" class = "graph_s"> 190 <tr><th colspan=6 height="10%" ></th></tr> 191 <tr width="16%" height="10%"> 192 <th></th><th></th><th></th><th> 193 </th><th></th><th></th> 194 </tr> 195 <tr align="center"> 196 <td> 197 <label><input type="checkbox" class="G2" value="0.1" >aaa</label> 198 </td> 199 <td> 200 <label><input type="checkbox" class="G2" value="0.2" >bbb</label> 201 </td> 202 <td> 203 <label><input type="checkbox" class="G2" value="0.3" >ccc</label> 204 <td> 205 <label><input type="checkbox" class="G2" value="0.4" >ddd</label> 206 </td> 207 <td> 208 <label><input type="checkbox" class="G2" value="0.5" >eee</label> 209 </td> 210 <td> 211 <label><input type="checkbox" class="G2" value="0.6" >fff</label> 212 </td> 213 </tr> 214 <tr align="center"> 215 <td> 216 <label><input type="checkbox" class="G2" value="0.1" >aaa</label> 217 </td> 218 <td> 219 <label><input type="checkbox" class="G2" value="0.2" >bbb</label> 220 </td> 221 <td> 222 <label><input type="checkbox" class="G2" value="0.3" >ccc</label> 223 <td> 224 <label><input type="checkbox" class="G2" value="0.4" >ddd</label> 225 </td> 226 <td> 227 <label><input type="checkbox" class="G2" value="0.5" >eee</label> 228 </td> 229 <td> 230 <label><input type="checkbox" class="G2" value="0.6" >fff</label> 231 </td> 232 </tr> 233 <tr align="center"> 234 <td> 235 <label><input type="checkbox" class="G2" value="0.1" >aaa</label> 236 </td> 237 <td> 238 <label><input type="checkbox" class="G2" value="0.2" >bbb</label> 239 </td> 240 <td> 241 <label><input type="checkbox" class="G2" value="0.3" >ccc</label> 242 <td> 243 <label><input type="checkbox" class="G2" value="0.4" >ddd</label> 244 </td> 245 <td> 246 <label><input type="checkbox" class="G2" value="0.5" >eee</label> 247 </td> 248 <td> 249 <label><input type="checkbox" class="G2" value="0.6" >fff</label> 250 </td> 251 </tr> 252 253 </table> 254</div> 255</div> 256<script src="script.js"></script> 257</body> 258</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。