jQueryのcheckedのdisabledをaddClass、removeClassが正常に機能しない

解決したいことは、クラス名が3種類あるブロック内にcheckboxを置いてるのですが、
最初に、チェックを入れたブロックのみに強制したく、他ブロックはdisabledにしたいのですが、
記述の順番を入れ替えたときに、1つのパターンのときだけ、正常に機能しません。

以下の記述の場合は、【.staff-check】へチェックを入れたときに、【.style-check2】へはdisabledが付与されますが、
【.style-check1】はdisabledが付与されません。

ご教授いただけますでしょうか。

<form>
  <div class="p-search__elem">
    <fieldset class="p-search__elem-item">
      <legend class="p-search__elem-item-title">おとなの音楽教室で探す</legend>
      <ul class="style-box1" style="display: none;">
        <li class="disabled">
          <input type="checkbox" id="senior-63" class="style-check1" name="search_cat1[]" value="63" disabled="">
          <label class="p-search-list__item-label" for="senior-63">トランペット</label>
        </li>
        <li class="disabled">
          <input type="checkbox" id="senior-64" class="style-check1" name="search_cat1[]" value="64" disabled="">
          <label class="p-search-list__item-label" for="senior-64">ピアノ</label>
        </li>
      </ul>
    </fieldset>
    <fieldset class="p-search__elem-item">
      <legend class="p-search__elem-item-title">こどもの音楽教室で探す</legend>
      <ul class="style-box2" style="display: none;">
        <li>
          <input type="checkbox" id="kids-16" class="style-check2" name="search_cat2[]" value="16">
          <label class="p-search-list__item-label" for="kids-16">チューバ</label>
        </li>
        <li>
          <input type="checkbox" id="kids-18" class="style-check2" name="search_cat2[]" value="18">
          <label class="p-search-list__item-label" for="kids-18">トランペット</label>
        </li>
      </ul>
    </fieldset>
    <fieldset class="p-search__elem-item">
      <legend class="p-search__elem-item-title">講師紹介で探す</legend>
      <ul class="staff-box" style="display: none;">
        <li>
          <input type="checkbox" id="staff-25" class="staff-check" name="search_staff[]" value="25" disabled="">
          <label class="p-search-list__item-label" for="staff-25">小倉恵理</label>
        </li>
        <li>
          <input type="checkbox" id="staff-386" class="staff-check" name="search_staff[]" value="386" disabled="">
          <label class="p-search-list__item-label" for="staff-386">三浦コウ</label>
        </li>
      </ul>
    </fieldset>
  </div>


  <input id="js-search__submit" class="p-search__submit p-btn" type="submit" value="検索する">

  <input id="js-search__reset" class="p-search__reset p-btn" type="reset" value="リセット">
</form>

  $('input').on('change', function() {

    /* おとな　*/
    if ($('.style-check1').is(':checked')) {
      $('.staff-check,.style-check2').prop('disabled', true);
      $('.staff-check,.style-check2').prop('checked', false);
      $('.staff-check,.style-check2').parent().addClass('disabled');
    } else {
      $('.staff-check,.style-check2').prop('disabled', false);
      $('.staff-check,.style-check2').parent().removeClass('disabled');
    }

    /* 講師 */  
  if ($('.staff-check').is(':checked')) {
      $('.style-check1,.style-check2').prop('disabled', true);
      $('.style-check1,.style-check2').prop('checked', false);
      $('.style-check1,.style-check2').parent().addClass('disabled');
    } else {
      $('.style-check1,.style-check2').prop('disabled', false);
      $('.style-check1,.style-check2').parent().removeClass('disabled');
    }

    /* こども　*/
    if ($('.style-check2').is(':checked')) {
      $('.staff-check,.style-check1').prop('disabled', true);
      $('.staff-check,.style-check1').prop('checked', false);
      $('.staff-check,.style-check1').parent().addClass('disabled');

    } else {
      $('.staff-check,.style-check1').prop('disabled', false);
      $('.staff-check,.style-check1').parent().removeClass('disabled');

    }

  });

yambejp

2018/08/06 11:32

HTMLのソースも記載ください

退会済みユーザー

2018/08/06 11:39

HTMLを追記いたしました。<li>タグにdisableが付与されます。

行動規範の内容に同意します

回答2件

liにdisabledクラスをつけてもチェックボックスの属性は変わらないですよね
たとえばこんな感じ

javascript
1$(function(){
2  $('.my-check').on('change', function() {
3    var flg=$('.my-check:checked').length>0;
4    $(this).closest('.p-search__elem-item').siblings().find('input:checkbox').prop('disabled',flg);
5    //$(this).closest('.p-search__elem-item').siblings().find('.my-box').toggle(!flg);
6  }).filter(':checked:eq(0)').trigger('change');
7});

※非表示にする部分をコメントアウトしてあります。
※リロードの処理に対応しました

HTML
1
2<form>
3  <div class="p-search__elem">
4    <fieldset class="p-search__elem-item">
5      <legend class="p-search__elem-item-title">おとなの音楽教室で探す</legend>
6      <ul class="my-box style-box1">
7        <li>
8          <label><input type="checkbox" class="my-check style-check1" name="search_cat1[]" value="63">トランペット</label>
9        </li>
10        <li>
11          <label><input type="checkbox" class="my-check style-check1" name="search_cat1[]" value="64">ピアノ</label>
12        </li>
13      </ul>
14    </fieldset>
15    <fieldset class="p-search__elem-item">
16      <legend class="p-search__elem-item-title">こどもの音楽教室で探す</legend>
17      <ul class="my-box style-box2">
18        <li>
19          <label><input type="checkbox" class="my-check tyle-check2" name="search_cat2[]" value="16">チューバ</label>
20        </li>
21        <li>
22          <label><input type="checkbox" class="my-check style-check2" name="search_cat2[]" value="18">トランペット</label>
23        </li>
24      </ul>
25    </fieldset>
26    <fieldset class="p-search__elem-item">
27      <legend class="p-search__elem-item-title">講師紹介で探す</legend>
28      <ul class="my-box staff-box">
29        <li>
30          <label><input type="checkbox" class="my-check staff-check" name="search_staff[]" value="25">小倉恵理</label>
31        </li>
32        <li>
33          <label><input type="checkbox" class="my-check staff-check" name="search_staff[]" value="386">三浦コウ</label>
34        </li>
35      </ul>
36    </fieldset>
37  </div>
38
39
40  <input id="js-search__submit" class="p-search__submit p-btn" type="submit" value="検索する">
41
42  <input id="js-search__reset" class="p-search__reset p-btn" type="reset" value="リセット">
43</form>

投稿2018/08/06 11:58

編集2018/08/07 04:15

yambejp

総合スコア114767

退会済みユーザー

2018/08/07 02:48

すみません、質問の仕方が言葉足らずでした。。おとなの音楽教室で探す、こどもの音楽教室で探すとときは、クリックしたブロック以外にdisableが付与されますが、講師紹介で探すをクリックした際に、おとなの音楽教室で探すのブロックだけdisableが付与されません。現状のjsの記述の順番でそれが変わってしまうので、記述に問題かと思ってました。

yambejp

2018/08/07 03:28

ごめんなさい、理解がたりませんでしたねあらためて仕様としては・大人の方でチェックすると、子供の方がdisabled、講師に影響ない・子供の方でチェックすると、大人の方がdisabled、講師に影響ない・講師でチェックしても大人・子供には影響がないということでよろしいですか？

退会済みユーザー

2018/08/07 04:10 編集

仕様といたしましては、・大人の方、子供の方、講師の方で一番最初にチェックを入れたブロック以外は全てdisabledにしたいです。 ※他のブロックをチェックする場合は、一番最初に入れたチェックを外さないと、（それ以外の2つのグロック）disabledがRemoveClassしない仕様が理想です。・子供の方でチェックすると、大人の方disabled、講師の方disabled ・大人の方でチェックすると、子供の方disabled、講師の方disabled ・講師の方でチェックすると、大人の方disabled、子供の方disabled 現状のバグといたしましては、・子供の方でチェックすると、大人の方disabled、講師の方disabled　＝ OK ・大人の方でチェックすると、子供の方disabled、講師の方disabled ＝ OK ・講師の方でチェックすると、大人の方disabledされない、子供の方disabled ＝ NG 講師の方でチェックした場合にだけ、大人の方がdisabledが付与されていないJS記述となってしまっております。これは、以下の講師の処理の記述を子供のJSの記述の下へ記述をした場合では、 NGの処理も変わります。 /* 講師 */ if ($('.staff-check').is(':checked')) { $('.style-check1,.style-check2').prop('disabled', true); $('.style-check1,.style-check2').prop('checked', false); $('.style-check1,.style-check2').parent().addClass('disabled'); } else { $('.style-check1,.style-check2').prop('disabled', false); $('.style-check1,.style-check2').parent().removeClass('disabled'); } /* こども　*/ if ($('.style-check2').is(':checked')) { $('.staff-check,.style-check1').prop('disabled', true); $('.staff-check,.style-check1').prop('checked', false); $('.staff-check,.style-check1').parent().addClass('disabled'); } else { $('.staff-check,.style-check1').prop('disabled', false); $('.staff-check,.style-check1').parent().removeClass('disabled'); } どうかご教授いただけますでしょうか。

yambejp

2018/08/07 04:15 編集

>・子供の方でチェックすると、大人の方disabled、講師の方disabled >・大人の方でチェックすると、子供の方disabled、講師の方disabled >・講師の方でチェックすると、大人の方disabled、子供の方disabled えーと、それって私が提示した回答なのですが、それじゃまずいのでしょうか？（勝手にclassをふったりするとNGってことですかね？） ※一部元の回答を調整しました、再確認お願いします

退会済みユーザー

2018/08/07 07:49 編集

修正いただきました記述で再度、試してみます。その前に、現状、アコーディオンも実装されておりまして、サイトをご確認いただくことは可能でしょうか。 ※今の現行サイトを一時的になりますが記載させていただきます。

退会済みユーザー

2018/08/07 05:27

ご教授いただきました記述を試しましたところ、全てにチェックが出来てしまい、diabledが機能していないようです。取り急ぎ、コードを戻させていただきます！

行動規範の内容に同意します

ベストアンサー

以下のコードで解決しました。
ありがとうございます。

$(function() {
  $('.style-box1 input').on('change', function() {
    /* おとな　*/
    if ($('.style-check1').is(':checked')) {
      $('.staff-check,.style-check2').prop('disabled', true);
      $('.staff-check,.style-check2').prop('checked', false);
      $('.staff-check,.style-check2').parent().addClass('disabled');
      console.log('大人の音楽教室がチェックON');
    } else {
      $('.staff-check,.style-check2').prop('disabled', false);
      $('.staff-check,.style-check2').parent().removeClass('disabled');
      console.log('大人の音楽教室がチェックOFF');
    }
  })
})
$(function() {
$('.staff-box input').on('change', function() {

    /* 講師 */
  if ($('.staff-check').is(':checked')) {
      $('.style-check1,.style-check2').prop('disabled', true);
      $('.style-check1,.style-check2').prop('checked', false);
      $('.style-check1,.style-check2').parent().addClass('disabled');
      console.log('講師がチェックON');
    } else {
      $('.style-check1,.style-check2').prop('disabled', false);
      $('.style-check1,.style-check2').parent().removeClass('disabled');
      console.log('講師がチェックOFF');
  }
})
})

$(function() {
$('.style-box2 input').on('change', function() {
    /* こども　*/
    if ($('.style-check2').is(':checked')) {
      $('.staff-check,.style-check1').prop('disabled', true);
      $('.staff-check,.style-check1').prop('checked', false);
      $('.staff-check,.style-check1').parent().addClass('disabled');
      console.log('こどもの音楽教室がチェックON');

    } else {
      $('.staff-check,.style-check1').prop('disabled', false);
      $('.staff-check,.style-check1').parent().removeClass('disabled');
      console.log('こどもの音楽教室がチェックOFF');
    }
  })
  })

投稿2018/08/07 09:10

退会済みユーザー

総合スコア0