当方JavaScript初心者＆質問初投稿になります。
勉強不足で申し訳ございませんが、お知恵をお貸しください。
背景
下記投稿と同様になります。条件分岐を使用しておりますが、項目をさかのぼって選択し直した場合、非表示となる項目に選択した回答が残るため条件分岐の挙動がおかしくなります。
実現したいこと
上記事象をカスタマイズで解消したいです。項目はすべてラジオボタンで作成されており、すべて初期値は「未選択」となります。案は下記2案となるかと思います。
- 案①：非表示のラジオボタンは選択肢を初期値に設定にする
- 案②：ラジオボタンが初期値以外のものが選択されたら（=1度操作されたら）そのラジオボタンを編集不可とする
可能であれば実施したいこと
フォームブリッジ内にはn個のラジオボタンがあり、すべてのラジオボタンについて上記の設定を実装したいです。
保守をしやすくするためにも、JavaScriptのコードでは、各フィールドコードを記載しなくても済むのであれば大変ありがたいです。
（例）変数[i]とし、for文でラジオボタンの数分同様の処理を繰り返す、等
（→これであれば、ラジオボタンの個数が変わった場合に繰り返し回数のみの変更で済むのでは、と考えておりますが、初心者なものでコードをどう組めばいいのか分かりません…。）
実行したこと
案②について、下記を参考にカスタマイズを実施しましたが、うまくいきませんでした。
以下は実装したコードになります。
いったんラジオボタンは1つのみでフォームを作成し、フィールドコードは「ラジオボタン1」としました。
(function() {
"use strict";
// 「ラジオボタン1」のフィールドが変更された時
fb.events.fields.ラジオボタン1.changed = [function (state) {
// 「ラジオボタン1」のフィールドの値が「未選択」以外の場合、「ラジオボタン1」を編集不可にする
if (state.record.ラジオボタン1.value !== "未選択") {
var inputElement = document.querySelector('[data-vv-name="ラジオボタン1"] > *');
inputElement.setAttribute("disabled", "disabled");
}
return state;
}];
})();
案①②どちらでも構いませんので、対処法をご教示いただければと思います。
何卒よろしくお願い申し上げます。
aaa
2
にあるように
changeイベントでラジオボタンの変更検知して
入力欄を空白にするのはどうですか？
ラジオボタンを変更するとリセットがかかるようなイメージ
(() => {
"use strict";
fb.events.fields.ラジオボタン.changed = [(state) => {
console.log(state);
state.record.文字列__1行_.value = "";
state.record.文字列__1行__0.value = ""
return state;
}];
})();
aaa
3
私の環境だけかも知れません。
FormBridgeで
ラジオボタンをつくって選択をクリックすると
Chrome環境では
のようなエラーが出ていました。
AAA様
返信いただきありがとうございます！
やりたいこととしては、下記2案のいずれかになります。
案①：フォームブリッジの条件分岐機能で非表示としているラジオボタン自体の選択肢を初期値にする
案②：初期値以外のものが選択されたラジオボタン自体を編集不可とする
案①については引用いただいた内容を参考にしましたが、上手くコードが組めまず機能しませんでした…。
案②の実装を試みましたが、ラジオボタンは編集不可にできませんでした。
代替案として、初期値以外のものが選択されたラジオボタン自体を非表示にすることはできましたが、可能であれば編集不可としたいです。
上記2案いずれかの実装方法につきまして、知見がございましたらご教示ください。
aaa
5
フォームの内容が理解できていないかもしれませんが、
ラジオボタンで条件分岐をしており
その表示・非表示部分にさらにラジオボタンがあるということでしょうか？
もしそうでしたら、質問者の案1)回答は以下のようになりませんか？
(() => {
"use strict";
fb.events.fields.条件分岐.changed = [(state) => {
console.log(state);
state.record.選択後ラジオボタンA.value = "未選択"
state.record.選択後ラジオボタンB.value = "未選択"
return state;
}];
})();
また、表示・非表示にしているラジオボタン(2つめのラジオボタン)には、未選択などをつける必要があります。
参考
フォームブリッジのラジオボタンで気を付けている3つのこと
条件分岐でラジオボタンを非表示にしている場合には、kintoneとラジオボタンで同期することをお勧めしていません。
aaa
6
案2)については、私もJavaScriptで介入できませんでした。
ただ、案2)は条件分岐をしてしまうと変更できないということはページを再読み込みをしないと条件分岐をやり直せないことになってしまいます。フォームとして使い勝手がわるそうです。
aaa
7
(() => {
"use strict";
fb.events.fields.条件分岐.changed = [async (state) => {
const parentDiv = await document.querySelector('div[data-vv-name="条件分岐"]');
if (parentDiv) {
const radios = await parentDiv.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
radio.disabled = true;
});
}
return state;
}];
})();
で制御できるようになりました。
「いいね！」 1
AAA様
度重なるアドバイスありがとうございます。
フォームの詳細を伝えきれていない中大変ありがたいです。
ご指摘の通り、条件分岐によりさらにラジオボタンを表示・非表示にしております。
(条件分岐で表示・非表示にするのはすべてラジオボタンになります。)
案1につきましてコード拝見いたしました。
使用しているフォームが、ラジオボタンが30個ほどあり、分岐も大変複雑なため、私の能力ですとコードを組むのが難しそうでした…。
後学のため参考にさせていただきます。
ありがとうございます。
最後に記載いただいたアドバイスにつきまして、正に案2と同等の効果を発揮しており、こちらを活用させていただきます！ラジオボタンの編集不可は調べても出てこずでしたので大変助かりました。
使い勝手についてはご指摘の通りです。
ただ、今回は、項目をさかのぼって選択し直すと条件分岐の挙動がおかしくなる状態を回避するのが目的でしたので、いただいたコードを実装することで目的達成できそうです。
本当にありがとうございました！
aaa
9
すみません。
適当なことを書いてしまいました。
async / awaitではなく setTimeoutを使うようにしてください。
(() => {
"use strict";
fb.events.fields.条件分岐.changed = [(state) => {
setTimeout(() => {
const parentDiv = document.querySelector('div[data-vv-name="条件分岐"]');
if (parentDiv) {
const radios = parentDiv.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
radio.disabled = true;
});
}
}, 1000); // 1秒後に実行
return state;
}];
})();
「いいね！」 1
AAA様
コードを修正いただきありがとうございます。
素人には「setTimeout」へ変えるべき理由がわからず恐縮ですが、そのようにさせていただきます。
なるべく即時編集不可としたいため、1000ミリ秒を100ミリ秒へ変更させた上、使用させていただきます。
ご丁寧にありがとうございました！
system
(system)
クローズされました:
11
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
