チェックボックスがdisabled時に、カーソルをデフォルトに設定したい。

Question

前提

Font Awesomeを利用したチェックボックスを作っています。
下記動作サンプルです。
動作サンプル

アイコンをクリックすると、アイコンとボーダーと文字の色がかわります。
文字の下にあるdisabledボタンを押すと、チェックボックスがdisabledになり、チェック時と同じように色が変わります。

アイコン、文字、disabledボタンそれぞれにカーソルをホバーすると、カーソルがポインターになります。

実現したいこと

チェックボックスがdisabledのときは、カーソルをデフォルトに設定したいです。

発生している問題

チェックボックスがdisabledでも、カーソルがポインターになっています。

該当のソースコード

html {
    text-align: center;
}

p{
    margin: 0;
}

#check {
    display: none;
}

i.fa-smile{
    display: flex;
    font-size: 80px;
    border: 4px solid black;
    border-radius: 50%;
    width: 120px;
    height: 120px;
}

.fa-smile::before{
    margin: auto;
}

#checkBtn {
    display: inline-block;
    cursor: pointer;
}

#check:checked + i {
    color: red;
    border: 4px solid red;
}

#check:checked ~ p {
    color: red;
}

#check:disabled #checkBtn {
    cursor: default;
}

#check:disabled + i {
    color: gray;
    border: 4px solid gray;
}

#check:disabled ~ p {
    color: gray;
}

#disabled{
    cursor: pointer;
}

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<label for="check" id="checkBtn">
  <input type="checkbox" id="check">
  <i class="far fa-smile"></i>
  <p>こんにちは</p>
</label>
<br>
<button id="disabled">disabled</button>

document.getElementById("disabled").onclick = function () {
  var obj = document.getElementById("check");
  if (obj.disabled === true) {
    obj.disabled = false;
    return;
  };
  obj.disabled = true;
};

試したこと

現状は機能しませんが、下記のように書いています。

#check:disabled #checkBtn {
    cursor: default;
}

#check:disabledと#checkBtn {}の間に何かを記述する必要があるかと思いネット上を調べましたが、親要素を指定できる書き方は見つけられませんでした。

もし親要素を指定できるのであれば、アイコンと文字の色を指定するコードをまとめられそうです。

Answer 1

<input type="checkbox" id="check"><!-- 位置を変える -->
<label for="check" id="checkBtn">
  <i class="far fa-smile"></i>
  <p>こんにちは</p>
</label>

#check:disabled + #checkBtn {
    cursor: default;
}