jQuery UI の Spinner で作るスピナーにおいて、有効/無効をボタンで切り替えられるようにする方法。
実装例（サンプル）
実装例（サンプル）の動作について
「▲」をクリックすると、インプット欄の数値に「1」を加える。
「▼」をクリックすると、インプット欄の数値から「1」を引く。
「有効/無効」をクリックすると、スピナー入力欄が有効の場合、無効化する。スピナー入力欄が無効の場合、有効化する。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
JavaScript
<script>
jQuery( function() {
jQuery( "#sampleButton" ).button();
var $sampleSpinner = jQuery( "#sampleSpinner" ).spinner();
jQuery( "#sampleButton" ).click( function() {
if ( $sampleSpinner.spinner( "option", "disabled" ) ) {
$sampleSpinner.spinner( "enable" );
} else {
$sampleSpinner.spinner( "disable" );
}
} );
} );
</script>
jQuery( function() {
jQuery( "#sampleButton" ).button();
var $sampleSpinner = jQuery( "#sampleSpinner" ).spinner();
jQuery( "#sampleButton" ).click( function() {
if ( $sampleSpinner.spinner( "option", "disabled" ) ) {
$sampleSpinner.spinner( "enable" );
} else {
$sampleSpinner.spinner( "disable" );
}
} );
} );
</script>
無効化は、Spinnerのdisable()メソッドを使い、jQuery( "セレクター" ).spinner().spinner( "disable" )
のように指定する。
有効化は、Spinnerのenable()メソッドを使い、jQuery( "セレクター" ).spinner().spinner( "enable" )
のように指定する。
HTML
<input id="sampleSpinner">
<button id="sampleButton">有効/無効</button>
<button id="sampleButton">有効/無効</button>