BootstrapのCheckbox/Radioを無効にする方法

Bootstrapでは、ボタンライクなCheckboxとRadioボタンが提供されています。

これらのボタンの動作を無効にするためには、disabled属性をつけるだけでは無効になりません。
そのやり方について書いていきます。

Bootstrapのバージョンは現時点での最新であるv3.3.7です。
一応α版の4.0.0でも試しましたが同じ問題が発生してました。
今後のバージョンアップ(4の正式版とか)で対応してくれないかなあ。

disabledを付けてみる

とりあえずinputタグにdisalbedをつけてみます。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" autocomplete="off" checked disabled> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off" disabled> Checkbox 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off" disabled> Checkbox 3
    </label>
</div>

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked  disabled> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"  disabled> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off" disabled> Radio 3
    </label>
</div>

しかし、これで試してみても各ボタンの状態は切り替わります。
開発者ツールで見てみると、active属性の切り替えが通常通り動作していることもわかります。
labelタグにdisabledクラスを付けると表示だけは無効化された感じになりますが、クリックすると状態が切り替わります。

無効化する方法

これはBootstrapのほうにdisabled属性によって切り替えを停止する処理がないためです。
そこで、無効化するためにはクリックイベントを取得し、Bootstrapのほうにイベントが伝播しないように処理を停止してやればよいです。

<script>
    $('.btn-group').on("click", ".disabled", function(event) {
        return false;
    });
</script>

btn-groupクラスの子要素でdisabledが付いている要素にクリックイベントを設定します。
そのイベントの中でreturn false;を実行することでそれ以降のイベントの伝播を停止することができます。

これによって、labelタグのクラスにdisabledをつけることで表示に合わせて切り替えイベントを停止することができます。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary disabled active">
        <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-primary disabled">
        <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-primary disabled">
        <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
</div>

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary disabled active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked  disabled> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary disabled">
        <input type="radio" name="options" id="option2" autocomplete="off"  disabled> Radio 2
    </label>
    <label class="btn btn-primary disabled">
        <input type="radio" name="options" id="option3" autocomplete="off" disabled> Radio 3
    </label>
</div>

イベント停止に関してはlabelタグではなく、inputタグにつけても停止しますが表示と合わせたかったのでlabelタグのほうでつけるのがいいかと思います。