###前提・実現したいこと
曜日をクリックすると、その曜日のすべての日が選択されるカレンダーに関連した質問です。
jQueryで平日のみを一括選択するカレンダーを作りたいのですがうまくいきません。
###発生している問題・エラーメッセージ
祝日を判定して除外するロジックがわからない。
###該当のソースコード
JSFiddle動くサンプル
HTML
1<label for=""> 2 <input type="checkbox" class="js-dow js-weekday">月曜</label> 3<label for=""> 4 <input type="checkbox" class="js-dow js-weekday">火曜</label> 5<label for=""> 6 <input type="checkbox" class="js-dow js-weekday">水曜</label> 7<label for=""> 8 <input type="checkbox" class="js-dow js-weekday">木曜</label> 9<label for=""> 10 <input type="checkbox" class="js-dow js-weekday">金曜</label> 11<label for=""> 12 <input type="checkbox" class="js-dow js-holiday">土曜</label> 13<label for=""> 14 <input type="checkbox" class="js-dow js-holiday">日曜</label> 15<label for=""> 16 <input type="checkbox" class="js-dow js-holiday js-nh">祝日</label> 17<label for=""> 18 <input type="checkbox" id="selectHolidays">土日祝日</label> 19<label for=""> 20 <input type="checkbox" id="selectWeekdays">平日</label> 21<table id="t1"> 22 <tr> 23 <th class="js-dow">mon</th> 24 <th class="js-dow">tue</th> 25 <th class="js-dow">wed</th> 26 <th class="js-dow">thu</th> 27 <th class="js-dow">fri</th> 28 <th class="js-dow">sat</th> 29 <th class="js-dow">sun</th> 30 </tr> 31 <tr> 32 <td class="js-national-holiday">1</td> 33 <td>2</td> 34 <td>3</td> 35 <td>4</td> 36 <td>5</td> 37 <td>6</td> 38 <td>7</td> 39 </tr> 40 <tr> 41 <td>8</td> 42 <td>9</td> 43 <td>10</td> 44 <td>11</td> 45 <td>12</td> 46 <td>13</td> 47 <td>14</td> 48 </tr> 49 <tr> 50 <td>15</td> 51 <td>16</td> 52 <td>17</td> 53 <td>18</td> 54 <td>19</td> 55 <td>20</td> 56 <td>21</td> 57 </tr> 58 <tr> 59 <td>22</td> 60 <td>23</td> 61 <td>24</td> 62 <td>25</td> 63 <td>26</td> 64 <td>27</td> 65 <td>28</td> 66 </tr> 67</table> 68
Javascript
1$(function() { 2 var cell = $('#t1 td'); 3 cell.on("click", function() { 4 if (!$(this).parent().hasClass('.disable') && !$(this).hasClass('selected')) { 5 $(this).addClass('selected'); 6 } else if (!$(this).parent().hasClass('disable') && $(this).hasClass('selected')) { 7 $(this).removeClass('selected'); 8 } 9 }); 10 11 $(".js-dow").on("change", function() { 12 var flg = $(this).prop('checked'); 13 var dow = $(".js-dow").index(this); 14 $("#t1 tr").each(function() { 15 $(this).find('td').eq(dow).toggleClass('selected', flg); 16 }); 17 }).change(); 18 19 $(".js-nh").on("change", function() { 20 var flg = $(this).prop('checked'); 21 var nh = $(".js-nh").index(this); 22 var hol = $(".js-national-holiday"); 23 $("#t1 tr").each(function() { 24 $(this).find(hol).eq(nh).toggleClass('selected', flg); 25 }); 26 }).change(); 27 28 var selectHolidays = $("#selectHolidays"); 29 selectHolidays.on('click', function() { 30 var dow = selectHolidays.index(this); 31 if (selectHolidays.is(':checked')) { 32 $('.js-holiday').prop('checked', true).change(); 33 } else { 34 $('.js-holiday').prop('checked', false).change(); 35 } 36 }); 37 38 var selectWeekdays = $("#selectWeekdays"); 39 selectWeekdays.on('click', function() { 40 var dow = selectWeekdays.index(this); 41 if (selectWeekdays.is(':checked')) { 42 $('.js-weekday').prop('checked', true).change(); 43 } else { 44 $('.js-weekday').prop('checked', false).change(); 45 } 46 }); 47 48});
試してみたこと
10/12追記:各位ご回答いただきありがとうございます。
下記のように書いてみましたがまだうまくいきませんでした…
(https://jsfiddle.net/gs2fbvmx/17/)
javascript
1 $(".js-dow").on("change", function() { 2 var flg = $(this).prop('checked'); 3 var dow = $(".js-dow").index(this); 4 var hol = $(".js-nh").index(this); 5 var td = $('td'); 6 $("#t1 tr").each(function() { 7 if (td.hasClass('.js-national-holiday').length) { 8 $(this).find('td').eq(hol).toggleClass('selected', flg); 9 } else { 10 $(this).find('td').eq(dow).toggleClass('selected', flg); 11 } 12 }); 13 }).change();
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/12 02:33
2016/10/12 23:53