見出し画像

フィールドの編集可否をラジオボタンの値で切り替える(複数対応)

やりたいこと

ラジオボタンの値の変更で、別フィールドの編集モードを変更する。
操作ミスを防ぐために、ラジオボタンの値で編集しなくても良いフィールドは編集できない様にしたい。

KinotneAPIでは、フィールドの編集モードを次の命令で切り替え出来ます。
record[フィールドコード].disabled = false;  // 編集可能に設定
record[フィールドコード].disabled = true;  // 編集不可に設定

1つのラジオボタンで1つのフィールドの編集可否を制御するだけなら、それほど難しい処理ではありません。
公式の「cybozu developer network」にもコード例が紹介されています。 
フィールドの編集可/不可を設定する

複数のラジオボタンと連携フィールドの処理

今回の要望は「アルコールチェック運転日報」のアプリで、入力項目の選択肢が複数あるのでもう少し複雑な仕様です。
選択するラジオボタンが3種類あり、各ラジオボタンと連携するフィールドも1つと2つ以上の場合が有ります。
さらに、編集不可にする際に入力値をクリアする/しないを、設定で選択可能にして欲しいという希望もありました。

具体的な動作イメージは、以下のデモ画面でご確認ください。
3種類のラジオボタンに各々連携するフィールドが1つと2つ以上の場合が有ります。
1つ目のラジオボタン「出勤記録」に連携する「出勤時間」と「確認者名」のフィールドは、ラジオボタンの値が「出勤」の場合に編集可能となります。また編集不可の状態でも値をクリアしない設定にしています。
2つ目のラジオボタン「酒気確認方法」に連携する「その他確認方法」のフィールドは、ラジオボタンの値が「その他」の場合に編集可能となります。また編集不可の状態では値をクリアする設定にしています。
3つ目のラジオボタン「酒気帯び」に連携する「指示事項」と「その他メモ」のフィールドは、ラジオボタンの値が「有り」の場合に編集可能となります。また編集不可の状態では値をクリアする設定にしています。

見た目で分かり易い様に、デモ画面では値をクリアする設定のフィールド名には(*)のマークを付けています。

デモ画面

ラジオボタンで複数フィールドの編集モードを制御

フィールドの編集モードを制御するJavascriptコード

/* ラジオボタンでフィールドの編集モードの制御を複数操作する */
(function() {
    "use strict";

    /* 初期設定(連想配列の設定方法)
       1つ目:ラジオボタンのフィールドコード
       2つ目:編集可にするラジオボタンの値
       3つ目:編集モードを制御するフィールドコードを設定(複数指定可)
       4つ目:編集モードが不可の場合に関連フィールドの値をクリアする(true)/しない(false)
    */
    const fieldSettings = {
        'ラジオボタン1': { editableValue: '値1', fields: ['Field1_1', 'Field1_2'], clearOn: false },
        'ラジオボタン2': { editableValue: '値2', fields: ['Field2_1', 'Field2_2'], clearOn: true },
        'ラジオボタン3': { editableValue: '値3', fields: ['Field3_1', 'Field3_2'], clearOn: true }
    };

    // フィールドの編集可否と値のクリアを設定する関数
    function setFieldEditable(record, radioButtonCode, settings) {
        const isEditable = record[radioButtonCode].value === settings.editableValue;
        settings.fields.forEach(fieldCode => {
            record[fieldCode].disabled = !isEditable;
            if (!isEditable && settings.clearOn) {
                record[fieldCode].value = null;
            }
        });
    }

    // イベントハンドラの登録
    Object.keys(fieldSettings).forEach(radioButtonCode => {
        const settings = fieldSettings[radioButtonCode];
        kintone.events.on([
            'app.record.create.show', 'app.record.edit.show',
            'app.record.create.change.' + radioButtonCode, 'app.record.edit.change.' + radioButtonCode
        ], function(event) {
            let record = event.record;
            setFieldEditable(record, radioButtonCode, settings);
            return event;
        });
    });
})();

初期設定で、以下の4種類の設定を連想配列で指定します。
①ラジオボタンのフィールドコード
②編集可能な状態を判定するラジオボタンの値
③ラジオボタンと連携するフィールドコード(複数指定可)
④編集不可モードで値のクリアを実行する/しないの設定

【注意】
①と③の設定は、フィールド名ではなく「フィールドコード」を設定して下さい。上記のコードは動作検証済ですので、もし動作しない場合は、フィールドコードの設定値が正しいか確認して下さい。

今回のコードは、ラジオボタンの部分がドロップリストでも動作します。
ドロップリストで同じ処理がしたい場合も参考になると思います。

よろしければサポートお願いします! いただいたサポートは、note記事制作の活動費に使わせていただきます!