選択項目によって入力させたい項目を切り替えるjs(要jQuery)

フォームとかでよくある
選択項目によって入力させたい項目を切り替えるjsです。
(改修の余地はありすぎますが、とりあえず動きます。)

以下が

ラジオボタンの会社項目(inputのnameがcompany)で”qiita”を選択された場合は社員番号を入力させる。
また、会社項目を”qiita”以外を選択された場合は会社名を入力させる。

というパターンの場合のjsです

toggle.js
// jQuery読み込んでおく
$(function(){
    // 初期表示時、両方の項目を非表示にしておく場合は両方hideを設定
    $('.switch-AAA').hide();  // 項目employee_idを内包するclass
    $('.switch-BBB').hide();  // 項目company_nameを内包するclass

    // companyが選択されていたら&その値が"qiita"だったら
    if ($('input[name="company"]:checked').val() 
        && $('input[name="company"]:checked').val() === 'qiita') {
         // employee_idのdisabledを外して表示させ、
         // company_nameをdisabledにして隠す。
        $('.switch-AAA').show();
        $('.switch-BBB').hide();
        $('[name="company_name"]').attr("disabled", true);
        $('[name="employee_id"]').attr("disabled", false);
    } else if ($('input[name="company"]:checked').val() 
        && $('input[name="company"]:checked').val() !== 'qiita') {
         // company_nameのdisabledを外して表示させ、
         // employee_idをdisabledにして隠す。
        $('.switch-AAA').hide();
        $('.switch-BBB').show();
        $('[name="company_name"]').attr("disabled", false);
        $('[name="employee_id"]').attr("disabled", true);
    }

    // companyがクリックされたら
    $('[name="company"]').click(function() {
        if ($('input[name="company"]:checked').val() 
            && $('input[name="company"]:checked').val() === 'qiita') {
            $('.switch-AAA').show();
            $('.switch-BBB').hide();
            $('[name="company_name"]').attr("disabled", true);
            $('[name="employee_id"]').attr("disabled", false);
        } else if ($('input[name="company"]:checked').val() 
            && $('input[name="company"]:checked').val() !== 'qiita'){
            $('.switch-AAA').hide();
            $('.switch-BBB').show();
            $('[name="company_name"]').attr("disabled", false);
            $('[name="employee_id"]').attr("disabled", true);
        }
    });
});

このjsを実装した場合、POSTされる項目とPOSTされない項目が出てきますので、

そういう場合はPHP側で

array_key_exists
を使って、配列に項目が入っているかをチェックした方がいいです(おそらく)

以下例

received.php
// POSTされた項目の中にemployee_idがあれば値に対してゼロサプレス処理を行う。
if (array_key_exists('employee_id', $attributes) === true) {
    $attributes['employee_id'] = ltrim($attributes['employee_id'], '0')
}

jQuery依存はいずれやめないとですねぇ

[紹介元] jQueryタグが付けられた新着投稿 – Qiita 選択項目によって入力させたい項目を切り替えるjs(要jQuery)

関連記事