jQuery API の is( selector ) は、マッチした要素が、さらに、selectorとマッチする場合、trueを返すメソッド。
記述方法
jQuery( セレクター1 ) . is( セレクター2 )
「セレクター1」にマッチした要素が、「セレクター2」に一致する場合、trueを返す。
記述例
jQuery( 'form :checkbox' ) . is( ':checked' )
form要素内のチェックボックスがチェックされている場合、trueを返す。
実装例(サンプル)
入力欄:
input:
textarea:
実装例(サンプル)の動作について
「有効」を選択すると、テキスト入力欄とテキストエリアを、有効にし、入力できるようにする。
「無効」を選択すると、テキスト入力欄とテキストエリアを、無効にし、入力できないようにする。
テキスト入力欄、もしくは、テキストエリアを、フォーカスすると、テキスト入力欄、もしくは、テキストエリアの背景色がベージュ色になる。
テキスト入力欄、もしくは、テキストエリアから、フォーカスを外すと、背景色が元に戻る。
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . change( function () {
jQuery( 'input[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'lightgray',
} );
jQuery( 'input:checked[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
if( jQuery( 'input[name=jquerySampleRadio]:eq(1)' ) . is( ':checked' ) ) {
jQuery( '.jquery-smaple-enable-disable' ) . attr( 'disabled', 'disabled' );
} else {
jQuery( '.jquery-smaple-enable-disable' ) . removeAttr( 'disabled' );
}
} ) . change();
jQuery( '.jquery-smaple-focus' ) . bind( 'focus blur', function() {
if( jQuery( this ) . is( ':focus' ) ) {
jQuery( this ) . css( 'backgroundColor', 'beige' );
} else {
jQuery( this ) . css( 'backgroundColor', '#f9f9f9' );
}
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . change( function () {
jQuery( 'input[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'lightgray',
} );
jQuery( 'input:checked[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
if( jQuery( 'input[name=jquerySampleRadio]:eq(1)' ) . is( ':checked' ) ) {
jQuery( '.jquery-smaple-enable-disable' ) . attr( 'disabled', 'disabled' );
} else {
jQuery( '.jquery-smaple-enable-disable' ) . removeAttr( 'disabled' );
}
} ) . change();
jQuery( '.jquery-smaple-focus' ) . bind( 'focus blur', function() {
if( jQuery( this ) . is( ':focus' ) ) {
jQuery( this ) . css( 'backgroundColor', 'beige' );
} else {
jQuery( this ) . css( 'backgroundColor', '#f9f9f9' );
}
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-smaple-form input {
margin: 5px;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 0 10px 0 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
border-radius: 5px;
}
#jquery-smaple-form label input {
cursor: pointer;
}
-->
</style>
<!--
#jquery-smaple-form input {
margin: 5px;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 0 10px 0 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
border-radius: 5px;
}
#jquery-smaple-form label input {
cursor: pointer;
}
-->
</style>
HTML
<div id="jquery-smaple-form">
<p>入力欄:
<label>
<input type="radio" name="jquerySampleRadio" checked="checked" />
有効
</label>
<label>
<input type="radio" name="jquerySampleRadio" />
無効
</label>
</p>
<p>
input:<input type="text" class="jquery-smaple-enable-disable jquery-smaple-focus" />
</p>
<p>
textarea:<textarea class="jquery-smaple-enable-disable jquery-smaple-focus"></textarea>
</p>
</div>
<p>入力欄:
<label>
<input type="radio" name="jquerySampleRadio" checked="checked" />
有効
</label>
<label>
<input type="radio" name="jquerySampleRadio" />
無効
</label>
</p>
<p>
input:<input type="text" class="jquery-smaple-enable-disable jquery-smaple-focus" />
</p>
<p>
textarea:<textarea class="jquery-smaple-enable-disable jquery-smaple-focus"></textarea>
</p>
</div>