Bootstrap Javascript,jQuery

Bootstrap3 + jQueryでラジオボタンの背景色を変更するスクリプト

2018/02/05

Bootstrapを使用して作成したラジオボタンの選択アイテムの背景書を変更するスクリプトが必要になったので、備忘録としてポストします。

Bootstrapのクセというべきか、labelタグにラジオボタンがラップられているので、少しだけ以前書いたスクリプトと違っています。

jQueryでラジオボタンの背景色を変更するスクリプト

過去ポスト

以前書いたポストはコチラ。

CakePHPが作るラジオボタンの選択時の背景色をjQueryを使って変更してみる

ラジオボタンの背景色をjQueryを使って変更してみる その2

デモ

今回のデモはこちらから。

Bootstrap仕様のラジオボタン

HTML

上記URLのサンプルを使ってみます。
3つめ(一番下)のオプションに関しては disabled が付与されているので選択不可となっています。

CSS

チェック時の背景色を指定

スクリプト

チェックされたラジオボタンの親要素である label タグに、checkedクラスを付与するようにしています。
親要素へは .parent() でアクセスしています。

あとは例によって読み込んだときに実行する .trigger() で change を実行しているだけ。
簡潔なスクリプトですね。

jQuery を使わずに CSS3 でするって手段もあるのですが、jQuery が好きなのでこっちを使ってみました。

デモ

今回のデモはこちらから。

舟を編む (光文社文庫)

舟を編む (光文社文庫)

三浦 しをん

価格 : 670円

-Bootstrap, Javascript,jQuery
-, ,