Tips

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

著者名：菊地 宏司

目次

はじめに

固定リンクがコピーされました

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

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行） 文字列（1行） 文字列__1行_
ラジオボタン ラジオボタン ラジオボタン
文字列（複数行） 文字列（複数行） 文字列__複数行_

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

ソースコード

固定リンクがコピーされました

 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で動作を確認しています。