フィールドの編集可否をラジオボタンの値で切り替える(複数対応)
やりたいこと
ラジオボタンの値の変更で、別フィールドの編集モードを変更する。
操作ミスを防ぐために、ラジオボタンの値で編集しなくても良いフィールドは編集できない様にしたい。
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記事制作の活動費に使わせていただきます!