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

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

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

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

過去ポスト

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

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

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

デモ

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

Bootstrap仕様のラジオボタン

HTML

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

[html]

[/html]

CSS

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

[css]

[/css]

スクリプト

[js]

[/js]

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

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

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

デモ

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

-Bootstrap, Javascript,jQuery
-bootstrap, ラジオボタン, 背景色