チェックボックスの選択を、複数ではなく単一にカスタマイズしたいのですが
生成AIを頼りに、JavaScriptでコードを書いているのですが一向にうまくいかず。
コードを貼り付けますので、申し訳ありませんが何かご教示いただけますでしょうか。
下記サイトを参考にしました。
kintoneチェックボックスを一つだけ選択できるようにする | ＨＴコンサルティング合同会社
よろしくお願いします。
(function() {
"use strict";
// テーブルのフィールドコード
const tableFieldCode = '精算書処理確認_seisan';
// テーブル内のチェックボックス列のフィールドコード
const checkboxFieldCode = '処理確認_seisan';
// 各行のチェックボックスの選択値を保存するオブジェクト
let checkboxValues = {};
// チェックボックスの初期状態を記憶するイベント
const showEvent = [
'app.record.create.show',
'app.record.edit.show',
'mobile.app.record.create.show',
'mobile.app.record.edit.show'
];
// チェックボックスの初期状態を記憶
kintone.events.on(showEvent, (event) => {
const record = event.record;
checkboxValues = {}; // リセット
// テーブルが存在し行がある場合
if (record[tableFieldCode] && record[tableFieldCode].value) {
// 各行のチェックボックスの初期値を記録
record[tableFieldCode].value.forEach((row) => {
const rowId = row.id;
if (row.value[checkboxFieldCode] && row.value[checkboxFieldCode].value.length > 0) {
checkboxValues[rowId] = row.value[checkboxFieldCode].value[0] || "";
} else {
checkboxValues[rowId] = "";
}
});
}
console.log('初期チェックボックス値:', checkboxValues);
return event;
});
// テーブル内のチェックボックスが変更されたときのイベント
const checkboxChangeEvent = [
`app.record.create.change.${tableFieldCode}.${checkboxFieldCode}`,
`app.record.edit.change.${tableFieldCode}.${checkboxFieldCode}`,
`mobile.app.record.create.change.${tableFieldCode}.${checkboxFieldCode}`,
`mobile.app.record.edit.change.${tableFieldCode}.${checkboxFieldCode}`
];
// チェックボックスの値が変更されたときの処理
kintone.events.on(checkboxChangeEvent, (event) => {
console.log('チェックボックス変更イベント:', event);
// 変更された行を特定
if (!event.changes || !event.changes.row) return event;
const record = event.record;
const changedRow = event.changes.row;
const rowId = changedRow.id;
const field = changedRow.value[checkboxFieldCode]; // イベントが発生したチェックボックス
// 変更前の値を取得
const prevValue = checkboxValues[rowId] || "";
console.log(`行ID: ${rowId}, 前の値: ${prevValue}, 現在の値:`, field.value);
// 選択肢が外されたとき
if (field.value.length === 0) {
checkboxValues[rowId] = "";
return event;
}
// 選択肢の変更が無いとき（同じものだけが選択されている）
if (field.value.length === 1 && prevValue === field.value[0]) {
return event;
}
// 以下は重要な処理：複数選択された場合または選択が変わった場合
// 新しく選択された値を特定
let newValue = "";
if (field.value.length > 1) {
// 複数選択された場合、前回の選択と異なる値を新しい選択とする
for (let i = 0; i < field.value.length; i++) {
if (field.value[i] !== prevValue) {
newValue = field.value[i];
break;
}
}
// すべてが前回の選択と異なる場合は最後の値を使用
if (newValue === "") {
newValue = field.value[field.value.length - 1];
}
} else {
// 単一選択の場合はその値を使用
newValue = field.value[0];
}
// 新しい選択値を記録
checkboxValues[rowId] = newValue;
// チェックボックスの値を更新（単一選択に制限）
field.value = [newValue];
console.log(`行ID: ${rowId}, 新しい値: ${newValue}`);
return event;
});
// テーブル行が追加/削除されたときのイベント
const tableChangeEvent = [
`app.record.create.change.${tableFieldCode}`,
`app.record.edit.change.${tableFieldCode}`
];
// テーブル行が追加/削除されたときの処理
kintone.events.on(tableChangeEvent, (event) => {
const record = event.record;
const table = record[tableFieldCode].value;
// テーブル内の各行をチェック
table.forEach((row) => {
const rowId = row.id;
// この行のチェックボックス値をまだ記録していない場合は初期化
if (checkboxValues[rowId] === undefined) {
if (row.value[checkboxFieldCode] && row.value[checkboxFieldCode].value.length > 0) {
// 複数選択されている場合は最初の値だけを保持
const firstValue = row.value[checkboxFieldCode].value[0] || "";
checkboxValues[rowId] = firstValue;
// 複数選択されている場合は単一選択に修正
if (row.value[checkboxFieldCode].value.length > 1) {
row.value[checkboxFieldCode].value = [firstValue];
}
} else {
checkboxValues[rowId] = "";
}
}
});
console.log('テーブル変更後のチェックボックス値:', checkboxValues);
return event;
});
// DOM操作で確実に単一選択を維持する補助的なアプローチ
// ※APIだけで解決しない場合のバックアップ
document.addEventListener('click', function(e) {
// クリックされた要素がチェックボックスか確認
if (e.target.type !== 'checkbox') return;
// テーブル内のチェックボックスかどうか確認
const checkbox = e.target;
const cell = checkbox.closest('[data-field-code="' + checkboxFieldCode + '"]');
if (!cell) return;
// 同じセル内の他のチェックボックスを取得
const checkboxes = cell.querySelectorAll('input[type="checkbox"]');
if (checkboxes.length <= 1) return;
// クリックされたチェックボックス以外のチェックを外す
setTimeout(function() {
checkboxes.forEach(function(cb) {
if (cb !== checkbox && cb.checked) {
cb.checked = false;
}
});
}, 0);
}, true);
})();
ﾁｪｯｸﾎﾞｯｸｽのほうがいい
かも
になっていますね