質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 706

解決したいことは、クラス名が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');

    }

  });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2018/08/06 20:32

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

    キャンセル

  • thomas_maverick

    2018/08/06 20:39

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

    キャンセル

回答 2

+3

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

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


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

<form>
  <div class="p-search__elem">
    <fieldset class="p-search__elem-item">
      <legend class="p-search__elem-item-title">おとなの音楽教室で探す</legend>
      <ul class="my-box style-box1">
        <li>
          <label><input type="checkbox" class="my-check style-check1" name="search_cat1[]" value="63">トランペット</label>
        </li>
        <li>
          <label><input type="checkbox" class="my-check style-check1" name="search_cat1[]" value="64">ピアノ</label>
        </li>
      </ul>
    </fieldset>
    <fieldset class="p-search__elem-item">
      <legend class="p-search__elem-item-title">こどもの音楽教室で探す</legend>
      <ul class="my-box style-box2">
        <li>
          <label><input type="checkbox" class="my-check tyle-check2" name="search_cat2[]" value="16">チューバ</label>
        </li>
        <li>
          <label><input type="checkbox" class="my-check style-check2" name="search_cat2[]" value="18">トランペット</label>
        </li>
      </ul>
    </fieldset>
    <fieldset class="p-search__elem-item">
      <legend class="p-search__elem-item-title">講師紹介で探す</legend>
      <ul class="my-box staff-box">
        <li>
          <label><input type="checkbox" class="my-check staff-check" name="search_staff[]" value="25">小倉恵理</label>
        </li>
        <li>
          <label><input type="checkbox" class="my-check staff-check" name="search_staff[]" value="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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/07 13:13 編集

    >・子供の方でチェックすると、大人の方disabled、講師の方disabled
    >・大人の方でチェックすると、子供の方disabled、講師の方disabled
    >・講師の方でチェックすると、大人の方disabled、子供の方disabled

    えーと、それって私が提示した回答なのですが、それじゃまずいのでしょうか?
    (勝手にclassをふったりするとNGってことですかね?)

    ※一部元の回答を調整しました、再確認お願いします

    キャンセル

  • 2018/08/07 14:19 編集

    修正いただきました記述で再度、試してみます。

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

    キャンセル

  • 2018/08/07 14:27

    ご教授いただきました記述を試しましたところ、
    全てにチェックが出来てしまい、diabledが機能していないようです。

    取り急ぎ、コードを戻させていただきます!

    キャンセル

check解決した方法

0

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

$(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');
    }
  })
  })

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる