jQuery API の prop( map ) は、「map」に指定したプロパティ名とプロパティの値の対応マップの通りに設定するメソッド。
記述方法
jQuery( セレクター ) . prop( { プロパティ名: プロパティ値, プロパティ名: プロパティ値, プロパティ名: プロパティ値 ... } )
「セレクター」に指定した要素の、「プロパティ名」に指定したプロパティの値を、「プロパティ値」に指定した値に設定。
記述例
jQuery( 'input' ) . prop( { disabled: true } )
input要素のdisabledプロパティの値をtrueに設定。
実装例（サンプル）
入力欄：
input：
textarea：
実装例（サンプル）の動作について
「有効」を選択すると、テキスト入力欄とテキストエリアを、有効にし、入力できるようにする。
「無効」を選択すると、テキスト入力欄とテキストエリアを、無効にし、入力できないようにする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . change( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( 'input:checked[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
var checked = jQuery( 'input[name=jquerySampleRadio]:eq(1)' ) . prop( 'checked' );
if ( checked ) {
jQuery( '.jquery-sample-switch-disabled' ) . prop( {
disabled: true
} );
jQuery( '.jquery-sample-switch-opacity' ) . fadeTo( 500, 0.3 );
} else {
jQuery( '.jquery-sample-switch-disabled' ) . prop( {
disabled: false
} );
jQuery( '.jquery-sample-switch-opacity' ) . fadeTo( 500, 1 );
}
} ) . change();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . change( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( 'input:checked[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
var checked = jQuery( 'input[name=jquerySampleRadio]:eq(1)' ) . prop( 'checked' );
if ( checked ) {
jQuery( '.jquery-sample-switch-disabled' ) . prop( {
disabled: true
} );
jQuery( '.jquery-sample-switch-opacity' ) . fadeTo( 500, 0.3 );
} else {
jQuery( '.jquery-sample-switch-disabled' ) . prop( {
disabled: false
} );
jQuery( '.jquery-sample-switch-opacity' ) . fadeTo( 500, 1 );
}
} ) . change();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-smaple-form p {
margin: 5px;
}
#jquery-smaple-form input {
margin: 0;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 2px 5px;
border: 1px solid gray;
border-radius: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
-->
</style>
<!--
#jquery-smaple-form p {
margin: 5px;
}
#jquery-smaple-form input {
margin: 0;
}
#jquery-smaple-form label {
margin: 5px 10px;
padding: 2px 5px;
border: 1px solid gray;
border-radius: 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
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 class="jquery-sample-switch-opacity">
input：<input type="text" class="jquery-sample-switch-disabled" />
</p>
<p class="jquery-sample-switch-opacity">
textarea：<textarea class="jquery-sample-switch-disabled"></textarea>
</p>
</div>
<p>入力欄：
<label>
<input type="radio" name="jquerySampleRadio" checked="checked" />
有効
</label>
<label>
<input type="radio" name="jquerySampleRadio" />
無効
</label>
</p>
<p class="jquery-sample-switch-opacity">
input：<input type="text" class="jquery-sample-switch-disabled" />
</p>
<p class="jquery-sample-switch-opacity">
textarea：<textarea class="jquery-sample-switch-disabled"></textarea>
</p>
</div>