Bootstrap3
日本語リファレンス

広告

ボタン  button.js


ボタンの状態を制御したり、クリック毎に2つの状態を交互に切り替えたり、チェックボックスやラジオボタンをボタン化したりできるJavaScript。

サンプル

状態を保持するボタン:


クリック毎に2つの状態を交互に切り換えるボタン:


チェックボックスのボタン化:


ラジオボタンのボタン化:


状態を保持するボタンは、data-***-text属性に状態を示すテキストを指定する。***には、任意の文字列を指定する。ボタンのテキストの交換には、メソッドを呼び出す必要がある。詳しくは、こちら

クリック毎に2つの状態を交互に切り換えるボタンは、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>
	クリック毎に2つの状態を交互に切り換えるボタン:
	<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> チェックボックス1
	</label>
	<label class="btn btn-primary">
		<input type="checkbox" autocomplete="off"> チェックボックス2
	</label>
	<label class="btn btn-primary">
		<input type="checkbox" autocomplete="off"> チェックボックス3
	</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> ラジオボタン1
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="sampleRadio" id="sampleRadio2" autocomplete="off"> ラジオボタン2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="sampleRadio" id="sampleRadio3" autocomplete="off"> ラジオボタン3
	</label>
</div>

広告