ボタン button.js
ボタンの状態を制御したり、クリック毎に２つの状態を交互に切り替えたり、チェックボックスやラジオボタンをボタン化したりできるJavaScript。
サンプル
状態を保持するボタン：
クリック毎に２つの状態を交互に切り換えるボタン：
チェックボックスのボタン化：
ラジオボタンのボタン化：
使い方
状態を保持するボタンは、data-***-text属性に状態を示すテキストを指定する。***には、任意の文字列を指定する。ボタンのテキストの交換には、メソッドを呼び出す必要がある。詳しくは、こちら。
クリック毎に２つの状態を交互に切り換えるボタンは、data-toggle属性にbuttonを指定する。
チェックボックスをボタン化する場合やラジオボタンをボタン化する場合は、data-toggle属性にbuttonsを指定する。
何れの場合も、Firefox対策として、autocomplete属性にoffを指定する。
ソースコード
<p> 状態を保持するボタン： <button type="button" id="sampleButtonStateful" class="btn btn-primary" data-loading-text="実行中" autocomplete="off"> サンプル </button> </p> <hr> <p> クリック毎に２つの状態を交互に切り換えるボタン： <button type="button" id="sampleButtonSingleToggle" class="btn btn-primary" data-toggle="button" autocomplete="off"> サンプル </button> </p> <hr> <p>チェックボックスのボタン化：</p> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr> <p>ラジオボタンのボタン化：</p> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="sampleRadio" id="sampleRadio1" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-primary"> <input type="radio" name="sampleRadio" id="sampleRadio2" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-primary"> <input type="radio" name="sampleRadio" id="sampleRadio3" autocomplete="off"> ラジオボタン３ </label> </div>