Q&A
ご指摘ありがとうございます。修正いたしました。
下記の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件
0
ベストアンサー
ちょっと説明が理解できていないのですが、num_possibleの値が変わらないのは、eachループ内で宣言しているからです。ループ毎に新しく3で初期化されます。ループの前に宣言してください。あと、処理が他にないのなら、num_possibleが0の時にbreakするようにした方がいいです。
あと、$("input[type=checkbox].power:not(:checked)").prop("disabled",true);これの.powerですが、powerってクラスついてるやついなくないですか？コピペミス？
投稿2019/07/10 01:27
総合スコア1507
0
$(function() { が閉じられていないです。
質問する前にConsoleでエラーの確認くらいはするべきかと。
投稿2019/07/09 23:44
総合スコア2937
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。