Bootstrap3 + jQueryでラジオボタンの背景色を変更するスクリプト
2019/12/16
Bootstrapを使用して作成したラジオボタンの選択アイテムの背景書を変更するスクリプトが必要になったので、備忘録としてポストします。
Bootstrapのクセというべきか、labelタグにラジオボタンがラップられているので、少しだけ以前書いたスクリプトと違っています。
jQueryでラジオボタンの背景色を変更するスクリプト
過去ポスト
以前書いたポストはコチラ。
デモ
今回のデモはこちらから。
Bootstrapのラジオボタンの背景色を変更するスクリプト
https://lightning-bolt.xyz/bootstrap/radiobg.html
https://lightning-bolt.xyz/bootstrap/radiobg.html
Bootstrap仕様のラジオボタン
HTML
CSS・Bootstrap
http://getbootstrap.com/css/#default-stacked
http://getbootstrap.com/css/#default-stacked
上記URLのサンプルを使ってみます。
3つめ（一番下）のオプションに関しては disabled が付与されているので選択不可となっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> |
CSS
チェック時の背景色を指定
|
1 2 3 4 5 |
<style> .checked { background: #9acd32; } </style> |
スクリプト
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(function(){ $('.radio :radio').change( function() { $('.radio :radio').parent().removeClass('checked'); $('.radio :checked').parent().addClass('checked'); } ).trigger('change'); }); </script> |
チェックされたラジオボタンの親要素である label タグに、checkedクラスを付与するようにしています。
親要素へは .parent() でアクセスしています。
あとは例によって読み込んだときに実行する .trigger() で change を実行しているだけ。
簡潔なスクリプトですね。
jQuery を使わずに CSS3 でするって手段もあるのですが、jQuery が好きなのでこっちを使ってみました。
デモ
今回のデモはこちらから。
Bootstrapのラジオボタンの背景色を変更するスクリプト
https://lightning-bolt.xyz/bootstrap/radiobg.html
https://lightning-bolt.xyz/bootstrap/radiobg.html