Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

frost_star
まだまだ半人前プログラマー。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした