prop( propertyName, value )

jQuery API の prop( propertyName, value ) は、「propertyName」に指定したプロパティの値を、「value」に指定した値に設定するメソッド。

記述方法

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>

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>

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>

スポンサード リンク

カテゴリー: API, DOM操作, JavaScript, jQuery, 一般的属性, 属性 タグ: パーマリンク