JavaScriptを使っていて、同じような処理を繰り返ししたいけど、タグやIDの違いで関数が長文になったり、汎用性悪くなる場合が、しばしばある。

無理矢理感はあるけど、引数に連想配列をいれれば、短くて汎用性がある関数が出来そう。

あまり使い道が思いつかないけど、formの無効化処理には、使えそうなので、メモとサンプルを記載。

JavaScript（イベント時に実行する関数）

引数にオブジェクト（配列）を渡すので、for文で処理する。

// value:判定用の値、obj:処理する要素
function changeForm(value, obj) {
    if (!value || typeof obj != 'object') return false;
    for (var i in obj) {
        var elm = $('*[name=" + i + "]');
        switch (value) {
            case 'init' : // 初期化
                elm.removeAttr("disabled");
                elm.val();
                break;
            case 'disable' : // 無効化
                setDisableForm(i, obj[i]);
                break;
            default : break;
        }
    }
}

JavaScript（フォームの無効化をする関数）

フォームのタイプ別で処理を行う。

function setDisableForm(name, type) {
    if (!name || !type) return false;
    var elm = $('*[name=" + name + "]');
    elm.attr('disabled', 'disabled');
    switch (type) {
        case 'checkbox' : elm.prop('checked', false); break;
        case 'radio' : elm.prop('checked', false); break;
        case 'select' : elm.val(''); break;
        case 'text' : elm.val(''); break;
        case 'password' : elm.val(''); break;
        case 'textarea' : elm.val(''); break;
        case 'submit' : break;
        case 'button' : break;
        case 'reset' : break;
        case 'file' : break;
        case 'image' : break;
        case 'hidden' : elm.val(''); break;
        default : break;
    }
}

HTML

changeForm()関数に渡すオブジェクトは、キーにname属性、値にtype属性を指定する。

<div>
    <select onchange="changeForm(this.value, {'name':'text', 'type':'select'});">
        <option value="">-</option>
        <option value="init">初期化</option>
        <option value="disable">無効化</option>
    </select>
</div>

<!-- 処理するFROMタグ -->
<div>
    <input type="text" name="name" value="" />
</div>
<div>
    <select name="type">
        <option value="">-</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
</div>