[Javascript] チェックボックスのオンオフによって表示を切り替えたい

Question

実現したいこと

左側のチェックボックスをオンオフした時、右側のチェックボックスのdisableとラベルのopacity表示を切り替えたい

実現できてること

右側のチェックボックスのdisableの切り替えはうまくいってる

発生している問題

ラベルのopacity表示は一度目はopacityが変わってくれるが
左側のチェックボックスを再度クリックしてチェックを外しても
opacity表示は切り替わらない。

詳細は添付画像

該当のソースコード

    <form action="">
        <label for="discount" class="top_search-discount">
            <input type="checkbox" id="discount" name="discount" value="割引あり" />
            <span>割引特典あり</span>
        </label>

        <label for="utilization-time" class="top_search-discount top_search-discount-right">
            <input type="checkbox" id="utilization-time" name="utilization-time" value="" />
            <span id="utilization-label">今スグ使える!</span>
        </label>
    </form>

        const discount = document.getElementById('discount');
    
        // 初期表示
        document.getElementById('utilization-time').disabled = true; // #utilization-time チェックをさせない
        document.getElementById('utilization-label').style.opacity = '0.5'; // #utilization-label opacityかける

        // #discountがクリックされたらconnectText関数発火
        discount.addEventListener('click', function(){
            this.classList.click(connectText('utilization-time',this.checked));
        });
    
        // connectText関数
        function connectText( textid, ischecked ) {
            document.getElementById(textid).disabled = !ischecked; // #utilization-time チェックボックス切り替え
            document.getElementById('utilization-label').style.opacity = '1'; // #utilization-label opacity変更
        }

試したこと

ここをclickからtoggleにしても変わらなかった。

    discount.addEventListener('click', function(){
        // this.classList.click(connectText('utilization-time',this.checked));
        this.classList.toggle(connectText('utilization-time',this.checked));
    });

Answer 1

三項演算子を使ってこうするとか：

- document.getElementById('utilization-label').style.opacity = '1';
+ document.getElementById('utilization-label').style.opacity = ischecked ? '1' : '0.5';

Comments

[DaisukeMori]

ありがとうございます。確かに三項演算子を使えばよかったんですね。

[DaisukeMori]

具体的なコードありがとうございます。
無事再現することが出来ました。

ただこのコメントの先に、考え方の肝に部分を指し示してくれた方がいますので
そちらの回答をベストアンサーとさせていただきました。

Answer 2

document.getElementById(textid).disabled = !ischecked; // #utilization-time チェックボックス切り替え
document.getElementById('utilization-label').style.opacity = '1'; // #utilization-label opacity変更

チェックボックスの有効無効を ischecked で切り替えているように、ラベルの opacity の値も ischecked で切り替えるといいと思います。

Comments

[DaisukeMori]

ありがとうございます。

[DaisukeMori]

考え方ありがとうございました。
上の方は具体的なコードを示してくれたのですが、
こちらの回答の方が考え方の肝を示してくれたのでベストアンサーとさせていただきます。