Q&A
カテゴリは１つしか選択できないのならcheckboxじゃなくてradioにした方がいいように思います。
以下の条件のcheckboxを完成させたいです。
1.カテゴリー「お知らせ」にチェックが入っている時は、カテゴリー「施工事例」と、その子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』もチェックできない。
2.カテゴリー「施工事例」にチェックがついていないと子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』はチェックできない。
3.カテゴリー「施工事例」のチェックを外すと、子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』のチェックが外れる。
HTML
1<div class="info-category"> 2 <ul class="info-category-list one"> 3 <li class=""> 4 <input id="info-1" class="item" type="checkbox"> 5 <label for="info-1" class="info-category__item--label">お知らせ</label> 6 </li> 7 </ul> 8</div> 9<div class="info-category"> 10 <ul class="info-category-list two"> 11 <li class="info-category-list__item"> 12 <input id="example" class="item" type="checkbox"> 13 <label for="example" class="info-category__item--label">施工事例</label> 14 </li> 15 <ul class="two-child"> 16 <li class="info-category-list__item"> 17 <input id="example1" class="item-child info-category-list__item--checkbox" 18 type="checkbox"> 19 <label for="example1" class="info-category__item--label">施工事例1</label> 20 </li> 21 <li class="info-category-list__item"> 22 <input id="example2" class="item-child info-category-list__item--checkbox" 23 type="checkbox"> 24 <label for="example2" class="info-category__item--label">施工事例2</label> 25 </li> 26 <li class="info-category-list__item"> 27 <input id="example3" class="item-child info-category-list__item--checkbox" 28 type="checkbox"> 29 <label for="example3" class="info-category__item--label">施工事例3</label> 30 </li> 31 </ul> 32 </ul> 33</div>
jQuery
1/*========================================================================== 21.カテゴリー「お知らせ」にチェックが入っている時は、カテゴリー「施工事例」チェックできない。 3==========================================================================*/ 4$(function () { 5 let ul = $('ul.one, ul.two'); 6 $('.item').on('click', function () { 7 if ($(this).prop('checked')) { 8 ul.not($(this).closest('ul')).find('.item').prop('disabled', true); 9 } else { 10 ul.not($(this).closest('ul')).find('.item').prop('disabled', false); 11 } 12 }); 13}); 14 15/*========================================================================== 162.カテゴリー「施工事例」にチェックがついていないと 17子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』はチェックできない。 18==========================================================================*/ 19$(function () { 20 let checkChild = $('ul.two'); 21 $('.item-child').on('click', function () { 22 if (checkChild.find('.item').prop('checked', true)) { 23 $('.item-child').prop('disabled', false); 24 } else { 25 $('.item-child').prop('disabled', true); 26 } 27 }); 28}); 29/*============================================================================================= 303.カテゴリー「施工事例」のチェックを外すと、 31子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』のチェックが外れる。 32=============================================================================================*/ 33$(function () { 34 let two = $('ul.two'); 35 two.find('.item').on('click', function () { 36 if ($(this).find('.item').prop('checked', true)) { 37 $('.item-child').prop('checked', false); 38 } 39 }); 40});
上記コードを書きました。
しかし、
1.に関しては、２と３をコメントアウトすれば動作OK。
２、３のコメントアウトを外すと、全てのカテゴリーがチェックできてしまう。
2.に関してはカテゴリー「施工事例」にチェックを入れていなくても、子カテゴリ『施工事例1』、『施工事例2』、『施工事例3』のいずれかチェックすると、親カテゴリー「施工事例」にチェックがつく。
3に関しては子カテゴリ『施工事例1』、『施工事例2』、『施工事例3』のいずれか一つにだけチェックできて、親カテゴリーの「施工事例」をクリックするとチェックある無しに関わらず子カテゴリのチェックが外れる。
どうすれば以下の条件のcheckboxを完成させられるでしょうか.
1.カテゴリー「お知らせ」にチェックが入っている時は、カテゴリー「施工事例」と、その子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』もチェックできない。
2.カテゴリー「施工事例」にチェックがついていないと子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』はチェックできない。
3.カテゴリー「施工事例」のチェックを外すと、子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』のチェックが外れる。
回答2件
0
hatena19さんの回答で指摘されているとおり、ご質問にあるHTMLでは、<ul class="info-category-list two"> の直下の要素に <ul class="two-child"> があるのがよろしくないです。ですので、<ul class="two-child">･･･</ul>全体を （info-category-list__itemないし他の何らかのクラスの）<li>で囲む修正が必要です。
それを踏まえた上でJQuery使ったコードのほうは、こんな感じですかねー。
javascript
1$(function () { 2 // 初期設定(すべてのチェックボックスのチェックを外し、かつ子チェックボックスをdisabledにする） 3 $('[class^=item]') 4 .prop('checked', false) 5 .filter('.item-child') 6 .prop('disabled', true); 7 8 // カテゴリ選択のチェックボックスの状態変更にコールバックを設定 9 $('.item').change(function() { 10 const category = $(this).closest('.info-category-list'); 11 const otherCategories = $('.info-category-list').not(category); 12 const checked = $(this).prop('checked'); 13 14 $(...(checked ? ['[class^=item]', otherCategories] : ['.item-child', category])) 15 .prop({ checked: false, disabled: true }); 16 17 $(...(checked ? ['.item-child', category] : ['.item', otherCategories])) 18 .prop({ disabled: false }); 19 20 }); 21}); 22
参考： 子チェックボックスを持つカテゴリー <div class="info-category"> をもうひとつ加えたHTMLで、上記のコードを試すサンプル
を作成しました。
投稿2022/08/06 12:44
退会済みユーザー
総合スコア0
0
ベストアンサー
まず、HTMLに文法上の間違いがありますので、それを修正しましょう。
ulの子にはli要素しか許可されてません。
現状のHTMLは下記のようにulの子要素にulがあります。(骨格のみ抜粋)
html
1 <ul class="info-category-list two"> 2 <li class="info-category-list__item"> 3 </li> 4 <ul class="two-child"> 5 <li class="info-category-list__item"> 6 </li> 7 <li class="info-category-list__item"> 8 </li> 9 <li class="info-category-list__item"> 10 </li> 11 </ul> 12 </ul>
これを下記のようにli要素の下にul(two-child)が来るように修正しましょう。
html
1 <ul class="info-category-list two"> 2 <li class="info-category-list__item"> 3 <ul class="two-child"> 4 <li class="info-category-list__item"> 5 </li> 6 <li class="info-category-list__item"> 7 </li> 8 <li class="info-category-list__item"> 9 </li> 10 </ul> 11 </li> 12 </ul>
そのうえで、JQueryは下記でいいでしょう。
JavaScript/JQuery
1$(function () { 2 //子カテゴリー『施工事例1』、『施工事例2』、『施工事例3』は読み込み時は無効 3 $('.item-child').prop('disabled', true); 4 let item = $('.item'); 5 item.on('click', function () { 6 if ($(this).prop('checked')) { 7 item.not($(this)).prop('disabled', true); //自分以外の.itemを無効 8 //↓次の.item-childを有効 9 $(this).nextAll('ul').find('.item-child').prop('disabled', false); 10 } else { 11 item.not($(this)).prop('disabled', false); //自分以外の.itemを有効 12 //↓次の.item-childのチェックを外して無効に 13 $(this).nextAll('ul').find('.item-child') 14 .prop('checked', false).prop('disabled', true); 15 } 16 }); 17});
投稿2022/08/06 08:16
総合スコア33202
回答へのコメント
Firefoxではリロードしてもチェック状態が残るのでクリアする必要があります。
$('.item-child').prop('disabled', true);
の後にでも
$('input[type="checkbox"]').prop('checked', false);
を追加して下さい。
HTMLのご指摘ありがとうございます。
教えていただいた通りにすると実装できました。
jquery難しいなぁ。。。。
ありがとうございます!!
あなたの回答
tips
プレビュー
