【Kintone】ルックアップ項目を編集可能に変更するJavascript

キントーンのテーブル内にルックアップフィールドを設定しています。ルックアップによってコピーされたフィールドは編集画面で編集できなくなっています。この編集不可の状態を解除して編集・保存ができるようにするJavascriptをメモ。

考え方
1. Javascriptソース
2. jQueryで行う場合のソース例
関連するプラグイン

考え方

ルックアップでコピーされた項目のINPUTタグに入力不可にされるためのdisabledが指定されていますので、このdisabledをJavascriptで無効化します。

<input id="12_12345678-:h0-text" type="text" class="input-text-cybozu" disabled="">

以下のページにあったソースを参考にさせていただいたところ、うまくできました。

Just a moment...

Javascriptソース

「明細」はテーブルのフィールドコードを表しています。「単価」「項目」はテーブル内に配置してる項目のフィールドコードを表しています。

(function() {
 "use strict";

 // 新規登録・編集画面
 kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
 var record = event.record;

 // 通常のフィールドのdisabled解除処理
 record['テーブルでない項目名']['disabled'] = false;

 // 「明細」サブテーブルのdisabled解除処理
 var subtable = record['明細'].value;
 for (var i = 0; i < subtable.length; i++) {
 subtable[i].value['単価'].disabled = false;
 subtable[i].value['項目'].disabled = false;
 }
 return event;
 });

 // 「明細」サブテーブルの変更イベント（行追加削除を拾う）
 kintone.events.on(['app.record.create.change.明細', 'app.record.edit.change.明細'], function(event) {
 // 「明細」サブテーブルのdisabled解除処理
 var row = event.changes.row;
 row.value['単価'].disabled = false;
 row.value['項目'].disabled = false;
 return event;
 });

})();

jQueryで行う場合のソース例

例えば、「項目」フィールドのクラス名が552345だった場合。項目を変更不可にロックしているdisabled-cybozuというクラスをjQueryで削除して、編集可能にします。

なお、テーブル内のレコードに変更があった際、またフィールドがロックされてしまうことがあるので、ここでは何かbuttonがクリックされたら1.5秒後に実行するようにしています。

(($) => {
  'use strict';

  kintone.events.on(['app.record.create.show','app.record.edit.show', 'app.record.create.change'], (event) => {
    $('button').click(() => {
      //window.alert('レコード追加イベントが呼び出されました');
      var record = event.record;
      
      setTimeout(function(){
        //window.alert('レコード追加イベントが呼び出されました');
        
        $('.value-552345 div').removeClass('disabled-cybozu');
        
      },1500);
      
    });
    //window.alert('レコード追加イベントが呼び出されました');
  });
})(jQuery);

考え方

Javascriptソース

jQueryで行う場合のソース例

関連するプラグイン