フィールドの入力不可をラジオボタンとチェックボックスで完全制御!

著者名:菊地 宏司

目次

はじめに

帳票などを作成する際の便利な使い方について紹介します。
フィールドの入力可、不可をチェックボックスやラジオボタンで制御したいという時はこんな使い方が便利です。

kintone ではボタン選択時のイベントが取得できます。
このイベントに合わせてフィールドを制御してみましょう。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/169/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。

入力欄を不可にした画面

フィールド値変更時イベントでの操作は、次のイベントタイプを指定します。

  • レコード追加画面:app.record.create.change.フィールドコード
  • レコード編集画面:app.record.edit.change.フィールドコード

以下は、イベントタイプの<フィールドコード>に指定可能なフィールドです。
フィールドコードに存在するフィールドコード、かつ次の種類のフィールドを指定した場合のみハンドラーが実行されます。

  • ラジオボタン
  • ドロップダウン
  • チェックボックス
  • 複数選択
  • ユーザー選択
  • 日付
  • 時刻
  • 日時

注意事項

  • 存在しないフィールドコード、または上記の種類以外のフィールドを指定した場合は何も発生しません。
  • 次のようなケースの場合には反映されません。
    • 編集権限のないフィールドの value を書き換えた場合
    • 編集権限のないフィールドの disabled を true に設定した場合

詳しくは フィールドの編集可/不可を設定する を参照してください。

アプリ準備

チェックボックスフィールドのフィールドの設定で、
「有効にする場合はチェックしてください」のチェックボックスを選択し、最初から選択された状態で表示されるように設定します。

ソースコード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*
 * Control input filed example
 * Copyright (c) 2014 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  // チェックボックスのイベントを取得
  const cbEvents = ['app.record.create.change.チェックボックス', 'app.record.edit.change.チェックボックス'];
  kintone.events.on(cbEvents, (event) => {

    const record = event.record;

    // チェックボックスの入力値チェック
    if (record.チェックボックス.value[0] === '有効にする場合はチェックしてください') {

      // チェックなしの場合は"文字列__1行_"を有効にする
      record.文字列__1行_.disabled = false;
    } else {
      // チェックありの場合は"文字列__1行_"を無効にする
      record.文字列__1行_.disabled = true;
    }
    return event;
  });

  // ラジオボタンのイベントを取得
  const rbEvents = ['app.record.create.change.ラジオボタン', 'app.record.edit.change.ラジオボタン'];
  kintone.events.on(rbEvents, (event) => {

    const record = event.record;

    // ラジオボタンの入力値チェック
    if (record.ラジオボタン.value === '有効にする') {

      // ラジオボタンが"有効にする"を選択している場合
      record.文字列__複数行_.disabled = false;
    } else {

      // ラジオボタンが"無効にする"を選択している場合
      record.文字列__複数行_.disabled = true;
    }
    return event;
  });
})();
information

この Tips は、2022 年 8 月版 kintone で動作を確認しています。