Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@frost_star

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

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

image

これらのボタンの動作を無効にするためには、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クラスを付けると表示だけは無効化された感じになりますが、クリックすると状態が切り替わります。

image

無効化する方法

これは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タグのほうでつけるのがいいかと思います。

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What is going on with this article?