チェックボックスの値によって入力不可にし、その際チェックボックスの選択肢も編集不可にする

下記のようなフィールドがあったとします。

 

フィールド種類:項目名:フィールドコード

チェックボックス:編集完了:編集完了

文字列一行:項目A:項目A

文字列一行:項目B:項目B

 

「編集完了」の選択肢は

『項目A編集完了』・『項目B編集完了』

となっているとします。

 

ここで「編集完了」の『項目A編集完了』にチェックを入れて保存すると、

「項目A」が入力不可になると同時に「編集完了」の選択肢である『項目A編集完了』のみが編集不可になるようにしたいと考えてます。

そして、それがある特定のユーザーだけ(組織は同じ)だけ、

『項目A編集完了』のみが編集不可にしたいです。

 

フィールドの入力不可をボタンで完全制御!

でフィールド自体をdisabledにすることは可能だと分かったのですが、

チェックボックスの中の一つの選択肢だけ入力不可すること、

そして、それをユーザー(もしくは組織)ごとに設定するのは可能でしょうか?

 

大変お手数をおかけいたしますが、

ご存知の方がいらっしゃったらご教示いただけると幸いです。

 

よろしくお願いいたします。

kyoden さん

こんにちは!

 

1つのチェックボックスフィールドを利用する場合、標準のkintone の関数では対応は難しいと思われ、

jQuery や DOM操作が必要なるかと考えられます。

 

参考ですが、チェックボックスフィールドの値を判定し、DOM操作でチェックボックスフィールドの

選択肢を非活性状態にすることで、対応は可能です。

 

ただ、DOM操作になるため、kintone のアップデートなどで処理が動作しなくなる可能性が

あるため、注意が必要です。

 

見苦しい内容になってますが、やっつけで処理を書いてみました。

参考になれば嬉しいです。

 

   ※ 私自身の気持ち的に各項目に入力しないとチェックボックスを選択できないようにしたかったため、

       コメントでいただいていない内容も実装していますが、ご了承ください。

 

   ※ チェックボックスフィールドが複数ある場合、正常に動作しないことも考えられるので、

        あくまで参考程度に見ていただければと思います。

 

(function () {
const ev_show = ["app.record.create.show", "app.record.edit.show"];
const ev_item_change = ["app.record.create.change.項目A", "app.record.create.change.項目B",
"app.record.edit.change.項目A", "app.record.edit.change.項目B"]
const ev_check_change = ["app.record.create.change.編集完了", "app.record.edit.change.編集完了"];

kintone.events.on(ev_show, function (ev) {
const rec = ev.record;
const ele = document.getElementsByClassName("input-checkbox-cybozu");
const target = new Array();

for(let i = 1; i <= 2; i++) {
for(let j = 0; j < ele[i].attributes.length; j++) {
if(ele[i].attributes[j].nodeName === "id") {
target.push("#" + ele[i].attributes[j].nodeValue);
break;
}
}
}

if(ev.type === "app.record.edit.show") {
for(let i = 0; i < rec.編集完了.value.length; i++) {
console.log(rec.編集完了.value[i]);
if(rec.編集完了.value[i] === "項目A編集完了") {
$(target[0]).attr({'disabled':true});
rec.項目A.disabled = true;
}

if(rec.編集完了.value[i] === "項目B編集完了") {
$(target[1]).attr({'disabled':true});
rec.項目B.disabled = true;
}
}
}

if(!(rec.項目A.value)) { $(target[0]).attr({'disabled':true}); }
if(!(rec.項目B.value)) { $(target[1]).attr({'disabled':true}); }

return ev;

});

kintone.events.on(ev_item_change, function (ev) {
const rec = ev.record;
const ele = document.getElementsByClassName("input-checkbox-cybozu");
const target = new Array();

for(let i = 1; i <= 2; i++) {
for(let j = 0; j < ele[i].attributes.length; j++) {
if(ele[i].attributes[j].nodeName === "id") {
target.push("#" + ele[i].attributes[j].nodeValue);
break;
}
}
}

if(ev.type === "app.record.create.change.項目A" || ev.type === "app.record.edit.change.項目A") {
if(rec.項目A.value) {
$(target[0]).attr({'disabled':false});
} else {
$(target[0]).attr({'disabled':true});
}
}

if(ev.type === "app.record.create.change.項目B" || ev.type === "app.record.edit.change.項目B") {
if(rec.項目B.value) {
$(target[1]).attr({'disabled':false});
} else {
$(target[1]).attr({'disabled':true});
}
}
});

kintone.events.on(ev_check_change, function (ev) {
const rec = ev.record;
const ele = document.getElementsByClassName("input-checkbox-cybozu");
const target = new Array();

for(let i = 1; i <= 2; i++) {
for(let j = 0; j < ele[i].attributes.length; j++) {
if(ele[i].attributes[j].nodeName === "id") {
target.push("#" + ele[i].attributes[j].nodeValue);
break;
}
}
}

for(let i = 0; i < rec.編集完了.value.length; i++) {
if(rec.編集完了.value[i] === "項目A編集完了") {
$(target[0]).attr({'disabled':true});
rec.項目A.disabled = true;
}

if(rec.編集完了.value[i] === "項目B編集完了") {
$(target[1]).attr({'disabled':true});
rec.項目B.disabled = true;
}
}
return ev;
});
})();