チェックボックス項目の選択可／不可を条件で制御する

やりたいこと

kintone UI Component v1を利用して、チェックボックスの値条件で項目の選択可能／不可を制御するカスタマイズ例を紹介します。

kintone UI Componentについて

kintone UI Componentを使用することで、JavaScript 内で HTML の要素や属性を書いたり、CSS で色や大きさなどを変更する必要なく、簡単に kintone ライクな UI （ユーザーインターフェイス）を作成できます。
kintone UI Component は、V0が2023年12月31日でセキュリティ対策を含むメンテナンス対応が終了したので、kintone UI Component v1の利用が推奨となっています。

https://cybozu.dev/ja/kintone/sdk/library/kintone-ui-component-v1/

本稿では標準のチェックボックスと区別するために、kintone UI Component v1を利用したラジオボタンを「KUC版Chekbox」と呼びます。
まずは、以下のデモ画面をご覧ください。

KUC版チェックボックスのデモ画面

チェックボックス項目の選択可／不可を条件制御するデモ画面

デモ画面では、チェックボックスの「卵サンド」が選択されている場合だけ「ブレンド珈琲」の選択が可能になる様にプロパティを制御しています。
「ナポリタン」と「カレーライス」だけを選択した場合は「ブレンド珈琲」の選択が出来ません。
また「KUC出力結果」のフィールド（文字列複数行）に選択した食事メニューの内容と変更前の内容を表示しています。

KUC版Chekboxには、標準のチェックボックスには無い機能があります。

（１）ラベルと値を別々に定義できます

標準のチェックボックスは、ラベル＝値なので別々に設定できませんが、KUC版Chekboxは、ラベルと値を別々に設定できます。
例）ラベル(label)：卵サンド、値(value)：卵サンド330円
レコード一覧表や詳細画面では値(value)で表示されますが、レコード編集画面では、値(value)に対応したラベル(label)が選択された状態でチェックボックスが表示されます。

（２）選択項目別に編集可否プロパティを設定できます

デモ画面では、「卵サンド」を選択した場合だけ「ブレンド珈琲」を選択できるように制御しています。

（３）変更前と変更後の値を取得できます

KUC版Chekboxのイベントプロパティで、選択肢のクリックが行われる毎に変更前の値と変更後の値を取得することができます。
デモ画面の「KUC出力結果」フィールドの（）内の文字が変更前の値を参照して出力しています。

（４）id/classプロパティでCSSコードの適用が可能

文字の大きさや色、マウスオーバーの色を指定できるCSSプロパティを持っていますので、カスタムCSSでデザインの適用が可能です。
kintone入出力画面のDOM操作（HTMLに新しい要素を追加する操作）は、kintoneのバージョンアップで影響を受けるので、kintone開発ガイドラインでは「非推奨」ですが、kintone UI Component を利用したオブジェクトには専用のCSSプロパティが有り、その利用は「非推奨」ではありません。

以上の点をまとめると以下の表の様になります。

標準版とKUC版のチェックボックスの機能比較

一番大きな違いは、Javascriptコードでチェックボックスのプロパティ（設定値）を変更できることです（デモ画面では、選択値の条件で「ブレンド珈琲」の編集可否を変更してます）
kintoneの標準フィールドは、Javascriptコードでプロパティ（設定値）を変えることはできませんが、kintone UI Component で生成したオブジェクトは、Javascriptコードでプロパティ（設定値）を変更することが可能です。
プロパティ（設定値）の変更とは、チェックボックスでは、labelとValueの値や編集可否の属性などを変えることです。

KUC版checkboxの詳しい仕様は、以下のサイトを参照して下さい。

Checkbox | kintone UI Component · Be a smart kintone developer.

---

アプリの設定方法

（１）アプリとフォームの準備

KUC版Checkboxを設置するアプリを準備します。

フォーム設計画面

KUC版Checkboxの設置に必要なフィールド名（フィールドコード）は以下の通りです。
フィールド名は自由ですが（）内のフィールドコードは、Javascript側の設定と合わせる必要が有ります。
＜KUC版Chekboxを設置するアプリ＞
・文字列１行　：フィールド名：KUC版Checkbox（OUTPUT_FIELD）
・スぺ―ス　　：スペース要素ＩＤ（Checkbox_Space）
・文字列１行　：フィールド名：KUC出力結果（STATUS_FIELD）

（２）KUC版ボタン設置のJavascriptコード

kintone UI Component v1を利用したカスタマイズ例です。
下記のサンプルコードをコピーして「KUC_Checkbox.js」という名前で保存します（好きなファイル名で大丈夫です）。
初期設定の部分で、アプリのフィールドコードと、KUC版ラジオボタンを配置するスペース要素IDを指定して下さい。

/* KUC版チェックボックスの設置 */
// フォーム要素の初期設定
const SPACE_ID = 'Checkbox_Space';
const OUTPUT_FIELD = 'OUTPUT_FIELD'; // KUC版Checkbox選択値の保存先
const STATUS_FIELD = 'STATUS_FIELD'; // 選択した値の表示先

// ラジオボタンの項目定義
const items = [
  { label: '卵サンド',     value: '卵サンド330円' },
  { label: 'ナポリタン',   value: 'ナポリタン650円' },
  { label: 'カレーライス', value: 'カレーライス680円' },
  { label: 'ブレンド珈琲', value: 'ブレンド珈琲250円', disabled: true } // 選択不可のオプション
];
// ------＜初期設定ここまで＞----------------

// フィールドの更新関数
function fieldUpdate(record, newValue) {
  const oldValue = record[OUTPUT_FIELD].value.split(', ');
  record[OUTPUT_FIELD].value = newValue.join(', ');
  record[STATUS_FIELD].value = newValue.join(', ') + "を選択しました\n" + "（変更前：" + oldValue.join(', ') + "）";
  kintone.app.record.set({ record });
}

// レコード新規登録・編集画面のイベント
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {
  const record = event.record;
  const spaceElement = kintone.app.record.getSpaceElement(SPACE_ID);

  // チェックボックスの初期化
  const Checkbox = new Kuc.Checkbox({
    label: 'KUCチェックボックス',
    requiredIcon: true,
    items: items,
    value: event.type === 'app.record.create.show' ? [] : record[OUTPUT_FIELD].value.split(', '),
    itemLayout: 'horizontal',
    className: 'options-class',
    id: 'options-id',
    borderVisible: true
  });

  spaceElement.appendChild(Checkbox);
  kintone.app.record.setFieldShown(OUTPUT_FIELD, false);

  // チェックボックスの値変更イベント
  Checkbox.addEventListener('change', event => {
    const newValues = event.detail.value;

    //ブレンド珈琲を編集可にする項目値（Value）
    const disableSelected = newValues.includes('卵サンド330円');

    // 選択項目に基づき、ブレンド珈琲の編集可否を更新
    Checkbox.items = items.map(item => {
      if (item.value === 'ブレンド珈琲250円') {
        return {
          ...item,
          disabled: !disableSelected  // ブレンド珈琲の編集可否の設定
        };
      }
      return item; // 他の項目は変更しない
    });

    fieldUpdate(record, newValues);　// フィールドの更新関数呼出し
  });

  return event;
});

【注意事項】　2024/04/16加筆

kintone UI ComponentのCDN版は動作試験の目的でのみご利用ください。
本番環境で利用する際はUDM版が推奨です。
詳しくは、以下の記事を参照して下さい。

スタイルのCSSカスタムコード

KUC版Checkboxの文字色（緑）とマウスオーバー色（赤）を指定するCSSコードの例を掲載しておきます。id値をKUC版Checkboxのプロパティのid値と合わせて利用して下さい。

   #options-id {
     --kuc-checkbox-menu-color: green;
     --kuc-checkbox-menu-color-hover:red;
   }

---

カスタマイズした感想

kintone UI Component を用いたKUC版Chekboxのカスタマイズは、最初はKUC版ラジオボタンのカスタマイズコードを応用して簡単にできると思っていたのですが、ラジオボタンと同じ処理コードでは出来ませんでした。
理由は、チェックボックスの値は「配列型」だからです。
ラジオボタンは値が1つだけですが、チェックボックスは複数の値を持つ配列型なので、値の読み込み、保存、条件比較は「配列」で操作する必要がありました。

今回は、選択項目の編集可／不可の制御だけでしたが、項目の表示／非表示（visible）のプロパティをJavascriptコード内で書き換えて、選択肢が変化するチェックボックスの実装例も以下の記事で紹介しています。

今回も最後まで読んで頂き、ありがとうございました。