jQuery カテゴリーAの子カテゴリーを選択すると、カテゴリーBの子カテゴリーをdisabled(選択できないようにしたい。)

Question

jQueryを使って、 カテゴリー「お知らせ」の子カテゴリー(inputタグ)を選択すると、カテゴリー「施工事例」の子カテゴリー(inputタグ)をdisable（選択できないよう）にしたいです。（逆もまたしかり）

しかし、以下のようにコードを書いたら、 カテゴリー「お知らせ」の子カテゴリー(inputタグ)、カテゴリー「施工事例」の子カテゴリー(inputタグ)全て選択できてしまいます。。。

<div>
    <p>お知らせ</p>
    <ul class="one">
        <li>
            <input class="item" id="info-1" name="category" type="checkbox">
            <label for="info-1">お知らせ1</label>
        </li>
        <li>
            <input class="item" id="info-2" name="category" type="checkbox">
            <label for="info-2">お知らせ2</label>
        </li>
    </ul>
</div>
<div>
    <p>施工事例</p>
    <ul class="two">
        <li>
            <input class="item" id="content-1" name="category" type="checkbox">
            <label for=""content-1">施工事例1</label>
        </li>
        <li>
            <input class="item" id=""content-2" name="category" type="checkbox">
            <label for=""content-2">施工事例2</label>
        </li>
    </ul>
</div>

// //ul class=".one"の孫要素.class=itemをクリックした時
$('.one')
  .find('.item')
  .on('click', function () {
    //もしul class=".two"の孫要素.class=itemにcheckedがついていたら
    if ($('.two').find('.item').prop('checked')) {
      // oneの孫要素.class=item、disabledをfalseに。
      $('.one').find('.item').prop('disabled', false);
      //それ以外は.oneの孫要素.class=itemをtrue
      $(this).prop('disable', true);
    }
  });

$(function () {
  let ul = $('ul.one, ul.two');
  //.class=itemをクリックした時
  $('.item').on('click', function () {
    //もし自身にcheckedがついていたら
    if ($(this).prop('checked')) {
      //自身の親以外のulの子孫要素の.class=item の disabled をfalseに。
      ul.not($(this).closest('ul')).find('.item').prop('disabled', false);
    }
  });
});

どうすれば、カテゴリー「お知らせ」の子カテゴリー(inputタグ)を選択すると、カテゴリー「施工事例」の子カテゴリー(inputタグ)をdisable（選択できないよう）逆もまたしかり。とできるでしょうか?

Comments

[RiaFeed]

同じ質問・・・？
https://teratail.com/questions/8s627erq6mox8l

[Fukusuke0604]

同じような質問ですが、カテゴリー「お知らせ」にcheckが付いたらカテゴリー「施工事例」のチェックを外すのではなく、disabledにしたかったのです。
disabledのtrue falseの認識間違い。　if文の書き方のミスでした。

Answer 1

if文の書き方、disabledのtrueとfalseの認識が逆になっていました。。。。。
以下で解決しました!

//ul class=".one"の孫要素.class=itemをクリックした時
$('.one')
  .find('.item')
  .on('click', function () {
    //もしul class=".two"の孫要素.class=itemにcheckedがついていたら
    if ($('.two').find('.item').prop('checked')) {
      // oneの孫要素.class=item、checkedをtrue(選択できない)に。
      $('.one').find('.item').prop('disabled', true);
    } else
    {
      //それ以外は.oneの孫要素.class=itemをdisabledをfalse(選択できる)
      $(this).prop('disabled', false);
    }
  });

$(function () {
  let ul = $('ul.one, ul.two');

  //.class=itemをクリックした時
  $('.item').on('click', function () {
    //もし自身にcheckedがついていたら
    if ($(this).prop('checked')) {
      //自身の親以外のulの子孫要素の.class=item の disabled をtrueに。
        ul.not($(this).closest('ul')).find('.item').prop('disabled', true);
    } else
    {
         //それ以外は.class=itemをdisabledをfalse(選択できる)
        ul.not($(this).closest('ul')).find('.item').prop('disabled', false);

    }
  });
});