kintoneチェックボックスを一つだけ選択できるようにする

本記事ではJavaScriptを使ったカスタマイズによりkintoneのチェックボックスを択一式にする方法をご紹介します。

選択式フィールドの違い

ユーザー・組織・グループの選択を除いても、kintoneで選択肢を扱うフィールドはラジオボタン・チェックボックス・複数選択・ドロップダウンの4種類があります

  • 複数選択が必要な場合：チェックボックスまたは複数選択
  • 一つだけ選択する必要がある場合：ラジオボタンまたはドロップダウン
  • 選択肢が多い場合、画面スペースを節約したい場合：ドロップダウン

というように、フォーム作成時に適切なフィールドを選択することで、ユーザーの利便性を高めることができます。各フィールドの特徴を下表にまとめてみました。

フィールドラジオボタンチェックボックスドロップダウン複数選択
選択できる選択肢1複数1複数
選択肢を選ばない×〇※〇※〇※
選択肢の一覧性全て画面内に並ぶ全て画面内に並ぶリストを見るまで確認できない５項目を超えるとスクロールアウト
※　必須項目にする設定があります

択一型のチェックボックスを利用したいシーン

アンケートフォームなどで良く見られるのはチェックボックスですが、kintoneでは標準機能で択一式にすることができません。

択一式のフィールドはラジオボタンとドロップダウンがあり、一覧性の高さを選ぶか表示のコンパクトさを選ぶのかでどちらを使うのかということになるでしょう。デフォルトで設定した値がアンケートの結果に影響されたくない場合は、必須項目設定したドロップダウンで設定するしかありません。

アンケートで利用する場合は、選択肢ひとつひとつが長い文章となる場合もありますので、一覧性も利便性に直結するためチェックボックスを択一式にするカスタマイズが有効となるでしょう。

ただし、チェックボックスは本来複数選択が可能な場面で使用されるか、一つだけ用意された選択肢のオン/オフを切り替えるような場面で使用されるものです。
アンケートや小テストのフォームで、いくつかの質問には複数の回答を選択させるが、ある特定の質問には１つの選択しだけ選ばせない、というようなデザイン上の統一性が求められる場合などに限定するなどして、ユーザーの混乱を招く事態をなるべく避けるべきです。

JavaScriptの実装

チェックボックスフィールドの選択肢がチェックされたときに、その選択肢以外のチェックを外す、という処理です。具体的には、「レコード追加画面でフィールドの値を変更したときのイベント」「レコード編集画面でフィールドの値を変更したときのイベント」にチェックボックスの選択状態を変更する処理を記述します。

JavaScriptによるフィールドの値の変更時にも、そのイベントが発生するということに注意してください。

イベント内でユーザーによる変更なのか、開発者が意図したプログラムでの変更なのかを判断するために、チェックボックスフィールドの変更前の状態を記憶しておきます。

  //おまじない
  "use strict";
  //択一式にするチェックボックスのフィールドコード
  const fieldCode = ['チェックボックス１', 'チェックボックス２', 'チェックボックス３'];
  //変更前にチェックされていたチェックボックスの選択肢
  let checkboxValue = [];
  
  //チェックボックスの初期状態を記憶するイベント
  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) => {
    let record = event.record;
    checkboxValue = [];
    fieldCode.forEach((code) => {
      chekboxValue[code] = record[code].value[0]||"";
    });
    return event;
  });

フィールドの値が変更されたときの処理を記述します。

  //チェックボックスの選択肢が変更されたときのイベント
  let changeEvent = [];
  fieldCode.forEach((code) => {
    changeEvent.push([
      `app.record.create.change.${code}`,
      `app.record.edit.change.${code}`,
      `mobile.app.record.create.change.${code}`,
      `mobile.app.record.edit.change.${code}`
    ]);
  });
  //選択された値以外のチェックを外す
  kintone.events.on(changeEvent, (event) => {
    let record = event.record;
    let eventType = event.type.split(".");
    let code = eventType[eventType.length - 1];
    const field = record[code]; //イベントが発生したチェックボックス
    if (field .value.length === 0) return event; //選択肢が外されたとき
    if (field .length === 1&&(checkboxValue[code] === field.value[0]||"")) return event; //選択肢の変更が無いとき
    if (field.value.length > 1) { //二つ目以降の選択肢がチェックされたとき
      // 元の選択肢を削除
      let id = field.value.indexOf(checkboxValue[code]);
      if (id >= 0) checkboxValue[code] = field.value.splice(id, 1)[0];
    }
    checkboxValue[code] = field.value[0]||"";
    if (checkboxValue[code] != "") field.value = [checkboxValue[code]]; //ここでもイベントが発生
    return event;
  });

これで完成です。

デモンストレーション

JavaScriptファイル付きのアプリテンプレート

当社では、サイボウズ公式パートナーとしてkintoneの導入支援・伴走支援を行うほか、既存サービスとの連携・サブシステム開発・アプリの個別カスタマイズを含めたシステム構築を得意としています。お客様のビジネスニーズに合わせた最適なソリューションを提供し、業務効率化と生産性向上を実現します。ぼんやりとした課題から詳細なご相談まで応じますので、ぜひ以下のリンクからお問い合わせフォームにご記入ください。

お問い合わせはこちら
PAGE TOP