disabledな要素に対してのみcssを変更したい

Question

前提・実現したいこと

bootstrap 4.3.1

<div class="btn-group-toggle" data-toggle="buttons"> 　<label class="input-group-text btn btn-disabled"> 　<input type="checkbox" class="single-checkbox" disabled> <span>テスト</span> </label> </div>

上記のように、inputがdisabledの時はcssを変更したい。

発生している問題・エラーメッセージ

cssを変更することはできたのですが、disabledでない要素にまで影響が出てしまいます。
また、hover時のcssの変更が反映されず、困っています…。

該当のソースコード

if($('.btn-disabled input').prop('disabled') === true ) {
       $('.btn-disabled').css(
          'background-color','#dedede',
          'color','#888',
          'cursor','not-allowed'
        ).hover(
          function() {
            // カーソルが当たった時の処理
            $(this).css(
              "background-color","#dedede",
              "color","#888",
              "cursor","not-allowed");
        }, function() {
      // カーソルが離れた時の処理
          $(this).css(
              "background-color","#dedede",
              "color","#888",
              "cursor","not-allowed");
          });
      };

補足情報（FW/ツールのバージョンなど）

bootstarp 4.3.1のリファレンスにあったラジオボタンを使用しているので、できたら構造などは変えず、処理を行いたいです。

Answer 1

cssメソッドの書き方がおかしいですね

$(function(){
  $('.btn-disabled').has('input:disabled').css({
    'background-color':'#dedede',
    'color':'#888',
    'cursor':'not-allowed',
    }).hover(
      function(){
        $(this).css({
          "background-color":"#dedede",
          "color":"#888",
          "cursor":"not-allowed",
        })
      }, function() {
        $(this).css({
          "background-color":"#dedede",
          "color":"#888",
          "cursor":"not-allowed",
        })
        }
      );
});

追記

disabledが変更になることも考えるとclassで処理する方がよいですね

<style>
.has-disabled{
  background-Color:#dedede;
  color:#888;
}
.has-disabled:hover{
  background-Color:black;
  color:white;
  cursor:not-allowed;
}
</style>
<script>
$(function(){
  $('.btn-disabled').has(':checkbox:disabled').addClass('has-disabled');
  $('.change-disabled').on('click',function(){
    $(this).prev('.btn-disabled').toggleClass('has-disabled').find(':checkbox').prop('disabled',function(){return $(this).is(':not(:disabled)');});
  });
});
</script>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="input-group-text btn btn-disabled">
<input type="checkbox" class="single-checkbox" disabled>
<span>テスト</span>
</label>
<input type="button" value="change" class="change-disabled">
</div>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="input-group-text btn btn-disabled">
<input type="checkbox" class="single-checkbox" disabled>
<span>テスト</span>
</label>
<input type="button" value="change" class="change-disabled">
</div>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="input-group-text btn btn-disabled">
<input type="checkbox" class="single-checkbox" disabled>
<span>テスト</span>
</label>
<input type="button" value="change" class="change-disabled">
</div>

Comments

[gohanoomori]

yambejpさん
アドバイスありがとうございます！！
無事実行できました！classで分けた方が良かったのですね、勉強になりました！ありがとうございます！

Answer 2

jQueryを使うなら、

jQuery('.btn-disabled:has( input:didabled)').css().hover();

jQueryの処理をクラス追加のみにして、.css() 部分をCSSで書くと、よりスマートになると思います。

jQuery('.btn-disabled:has( input:didabled)').addClass('has-disabled');

Re: gohanoomori さん

Comments

[gohanoomori]

think49さん
アドバイスありがとうございます！
確かにこうみるとclass追加の方がスマートでした！勉強になりました、ありがとうございます！

Answer 3

JavaScriptは使わず、CSSで実現してはどうでしょうか。:disabledのようなセレクタがあります。

.btn-disabled input:disabled{
  background-color: #dedede;
  color: #888;
  cursor: not-allowed;
}

Comments

[gohanoomori]

maisumakunさん

アドバイスありがとうございます。
そちらの方法を試したのですが、実現ができませんでした…。
bootstrapのリファレンスにあった構造で制作をしており、この場合ですと、
inputがdisabledだったとき、
.btn-disabledのcssを変更するという方法でないと対応ができないのかと思ったのですが……他にいい方法ありますでしょうか…？

[maisumakun]

子要素の状況を見て親要素のCSSを変えられる:has()というセレクタも提案されていはいますが、今のところ利用できる環境はありません。

https://developer.mozilla.org/ja/docs/Web/CSS/:has

（親要素の方を変える、というのを読み落としていてすみませんでした）

[yambejp]

cssにはhas的な解釈がないので難しいと思います