同意にチェックを入れると、有効になるフォーム

投稿日: 2011年10月14日 作成者: alphasis

同意にチェックを入れると、入力できるようになるフォーム。jQuery を使って作る方法。

実装例（サンプル）

input：

textarea：

select：

checkbox：

radio：

実装例（サンプル）の動作について

「同意する」のチェックボックスにチェックを入れると、フォーム部品を有効にし、入力できるようにする。さらに、フォームをフェードインする。

「同意する」のチェックボックスのチェックを外すと、フォーム部品を無効にし、入力できないようにする。さらに、フォームをフェードアウトで半透明にする。

実装例（サンプル）のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( 'input[name=jquerySampleAgreement]' ) . change( function() {
        jQuery( 'input[name=jquerySampleAgreement]' ) . closest( 'label' ) . css( {
            backgroundColor: 'yellow',
        } );
        jQuery( 'input:checked[name=jquerySampleAgreement]' ) . closest( 'label' ) . css( {
            backgroundColor: 'pink',
        } );
        var checked = jQuery( 'input[name=jquerySampleAgreement]' ) . prop( 'checked' );
        if ( checked ) {
            jQuery( '#jquery-smaple-form :input' ) . prop( 'disabled', false );
            jQuery( '#jquery-smaple-form' ) . fadeTo( 500, 1 );
        } else {
            jQuery( '#jquery-smaple-form :input' ) . prop( 'disabled', true );
            jQuery( '#jquery-smaple-form' ) . fadeTo( 500, 0.5 );
        }
    } ) . change();
} );
// -->
</script>

CSS

<style>
<!--
#jquery-sample-agreement label {
    margin: 5px 10px;
    padding: 2px 5px;
    border: 1px solid gray;
    border-radius: 5px;
    background-color: yellow;
    font-size: 15px;
    color: #303030;
    cursor: pointer;
}
#jquery-smaple-form {
    padding: 10px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #f0f0f0;
}
#jquery-sample-agreement p,
#jquery-smaple-form p {
    margin: 5px;
}
#jquery-smaple-form span {
    vertical-align: top;
}
#jquery-sample-agreement input,
#jquery-smaple-form input {
    margin: 0;
}
#jquery-smaple-form label {
    margin: 0 10px;
    font-size: 15px;
    color: #303030;
    cursor: pointer;
}
-->
</style>

HTML

<p id="jquery-sample-agreement">
    <label>
        <input type="checkbox" name="jquerySampleAgreement" />
        同意する
    </label>
</p>
<form id="jquery-smaple-form">
    <p>
        input：<input type="text" class="jquery-sample-switch-disabled" />
    </p>
    <p>
        <span>textarea：</span><textarea class="jquery-sample-switch-disabled"></textarea>
    </p>
    <p>select：
        <select>
            <option>オプション</option>
            <option>オプション</option>
        </select>
    </p>
    <p>checkbox：
        <label><input type="checkbox" /> 項目１</label>
        <label><input type="checkbox" /> 項目２</label>
        <label><input type="checkbox" /> 項目３</label>
    </p>
    <p>radio：
        <label><input type="radio" name="jquerySmapleRadio" /> 項目１</label>
        <label><input type="radio" name="jquerySmapleRadio" /> 項目２</label>
        <label><input type="radio" name="jquerySmapleRadio" /> 項目３</label>
    </p>
</form>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, フォーム パーマリンク