Q&A
「選択できないようにする」と、一度、お知らせの方を選択したら、2度と施工事例は選択できなくなりますが、それでいいのですか。間違えて選択してしまうということはありえますが。
お知らせを選択していて、施工事例を選択したら、お知らせの方は選択解除するということが、ご希望のことではないですか。
jQueryを使って、 カテゴリー「お知らせ」の子カテゴリー(inputタグ)を選択すると、カテゴリー「施工事例」の子カテゴリー(inputタグ)を選択できないようにしたいです。（逆もまたしかり）
HTML
1<div> 2 <p>お知らせ</p> 3 <ul class="one"> 4 <li> 5 <input class="item" id="info-1" name="category" type="checkbox"> 6 <label for="info-1">お知らせ1</label> 7 </li> 8 <li> 9 <input class="item" id="info-2" name="category" type="checkbox"> 10 <label for="info-2">お知らせ2</label> 11 </li> 12 </ul> 13</div> 14<div> 15 <p>施工事例</p> 16 <ul class="two"> 17 <li> 18 <input class="item" id="content-1" name="category" type="checkbox"> 19 <label for=""content-1">施工事例1</label> 20 </li> 21 <li> 22 <input class="item" id=""content-2" name="category" type="checkbox"> 23 <label for=""content-2">施工事例2</label> 24 </li> 25 </ul> 26</div>
jQuery
1//ul class=".one"の孫要素.class=itemをクリックした時 2$('.one').find('.item').on('click', function () { 3 4 //もしul class=".two"の孫要素.class=itemにcheckedがついていたら 5 if ($('.two').find('.item').prop('checked')) { 6 7 // twoの孫要素.class=item、checkedをfalseに。 8 $('.two').find('.item').prop('checked', false); 9 10 //それ以外は.oneの孫要素.class=itemをtrue 11 $(this).prop('checked', true); 12 } 13 });
これで良いと思ったのですが、全てのinputタグにcheckが付けられてしまいます。。。。
どうすれば、 カテゴリー「お知らせ」の子カテゴリー(inputタグ)を選択すると、カテゴリー「施工事例」の子カテゴリー(inputタグ)を選択できないようにできるでしょうか?（逆もまたしかり）
※子カテゴリーは複数選択できるようしたいです。
回答3件
0
選択されたカテゴリ以外を非表示にして選択できなくする方法です。
まず選択する部分を<div class="wrap">で囲います。
HTML
1<div class="wrap"> 2 <div> 3 <p>お知らせ</p> 4 <ul class="one"> 5 <li> 6 <input class="item" id="info-1" name="category" type="checkbox"> 7 <label for="info-1">お知らせ1</label> 8 </li> 9 <li> 10 <input class="item" id="info-2" name="category" type="checkbox"> 11 <label for="info-2">お知らせ2</label> 12 </li> 13 </ul> 14 </div> 15 <div> 16 <p>施工事例</p> 17 <ul class="two"> 18 <li> 19 <input class="item" id="content-1" name="category" type="checkbox"> 20 <label for="content-1">施工事例1</label> 21 </li> 22 <li> 23 <input class="item" id="content-2" name="category" type="checkbox"> 24 <label for="content-2">施工事例2</label> 25 </li> 26 </ul> 27 </div> 28</div>
JavaScriptはこんな感じにします。
<div class="wrap">が複数セットある場合も考慮しています。JavaScript/jQuery
1$(function() { 2 // Firefoxでリロードされた時の為にチェックを全てオフにする 3 $('.wrap .item').prop('checked', false); 4 $('.wrap').on('change', '.item', function(e) { 5 // 選択されたカテゴリ 6 const $cat = $(this).parents('.wrap > div'); 7 const $catAll = $cat.parent().children(); 8 // チェック済みアイテムの個数を数える 9 if ($('.item:checked', $cat).length) { 10 // 選択されたカテゴリ以外を非表示にする 11 $catAll.not($cat).slideUp('fast'); 12 } else { 13 // 全てのカテゴリを表示する 14 $catAll.slideDown('fast'); 15 } 16 }); 17});
注意する点が１つ
slideUp('fast')でアニメーション中は他のカテゴリを選択できます。
確実に選択できないようにしたい場合はhide()にした方がいいと思います。
投稿2022/07/29 04:43
総合スコア195
0
あるカテゴリのチェックが1個でも付いてたらもう片方のカテゴリのチェックは無効にして付けられないようにする
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 6 <script> 7 window.addEventListener('DOMContentLoaded', async (event) => { 8 $('.one').find('.item').on('click', function () { 9 let flag = false; 10 $('.one').find('.item').each(function() { 11 if($(this).prop('checked')) flag = true; 12 }); 13 $('.two').find('.item').each(function() { 14 $(this).prop('disabled', flag); 15 }); 16 }); 17 $('.two').find('.item').on('click', function () { 18 let flag = false; 19 $('.two').find('.item').each(function() { 20 if($(this).prop('checked')) flag = true; 21 }); 22 $('.one').find('.item').each(function() { 23 $(this).prop('disabled', flag); 24 }); 25 }); 26 }); 27 </script> 28 <title>選択テスト</title> 29</head> 30<body> 31 <div> 32 <p>お知らせ</p> 33 <ul class="one"> 34 <li> 35 <input class="item" id="info-1" name="category" type="checkbox"> 36 <label for="info-1">お知らせ1</label> 37 </li> 38 <li> 39 <input class="item" id="info-2" name="category" type="checkbox"> 40 <label for="info-2">お知らせ2</label> 41 </li> 42 </ul> 43 </div> 44 <div> 45 <p>施工事例</p> 46 <ul class="two"> 47 <li> 48 <input class="item" id="content-1" name="category" type="checkbox"> 49 <label for="content-1">施工事例1</label> 50 </li> 51 <li> 52 <input class="item" id="content-2" name="category" type="checkbox"> 53 <label for="content-2">施工事例2</label> 54 </li> 55 </ul> 56 </div> 57</body> 58</html>
投稿2022/07/29 04:23
総合スコア2703
0
ベストアンサー
ご希望のことが、
お知らせのチェックボックスを選択したら、施工事例の選択を解除
施工事例のチェックボックスを選択したら、お知らせの選択を解除
ということなら、下記でどうでしょう。
js
1let ul = $('ul.one, ul.two'); 2 3//.class=itemをクリックした時 4$('.item').on('click', function () { 5 //もし自身にcheckedがついていたら 6 if ($(this).prop('checked')) { 7 8 //自身の親以外のulの子孫要素の.class=item の checked をfalseに。 9 ul.not($(this).closest('ul')).find('.item').prop('checked', false); 10 11 } 12}); 13
投稿2022/07/29 04:25
総合スコア34367
あなたの回答
tips
プレビュー
