ラジオボタンの必須項目マーク(*)を非表示にしたいです。
ラジオボタンが必ず、必須項目になるのは承知しております。
フィールドコード:ラジオボタンで、
フィールド名の横に、*が表示されてるので、非表示にならないですか?
大変お手数ですが、ご教示ください。
よろしくお願いいたします。
(function() {
'use strict';
kintone.events.on(['app.record.edit.show', 'app.record.create.show'], function(event) {
// 必須フィールドのアスタリスクを非表示にする
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var requiredFields = kintone.app.getFieldElements('ラジオボタン');
if (requiredFields) {
requiredFields.forEach(function(field) {
var label = field.querySelector('.required');
if (label) {
label.style.display = 'none';
}
});
}
});
});
// 監視を開始
observer.observe(document.body, { childList: true, subtree: true });
// 初回実行
var requiredFields = kintone.app.getFieldElements('ラジオボタン');
if (requiredFields) {
requiredFields.forEach(function(field) {
var label = field.querySelector('.required');
if (label) {
label.style.display = 'none';
}
});
}
return event;
});
})();
Maple
(もみじ)
2
ご提示のコードだとうまくいかない理由は
kintone.app.getFieldElementsを利用できる画面に
レコード追加画面や編集画面が無いせいですね。
これらの画面では、非表示にする
クラス名を直接指定する必要があります。
ご回答ありがとうございます。
kintoneのカスタマイズが初心者のため、大変申し訳ありませんが、
どのようにしたらできるかヒントを教えていただけないでしょうか?
大変お手数ですがよろしくお願いいたします。
Maple
(もみじ)
4
ブラウザによってやり方が違いますが
Chromeならラジオボタンフィールドにポインタを合わせて
右クリック → 検証 でクラス名を調べられます。
非表示にしたいクラス名に対して
CSSで display: none を使えばいいです。
pomo
5
(() => {
'use strict';
kintone.events.on(['app.record.create.show','app.record.edit.show'], (event) => {
const className = "label-●●●"
const el = document.querySelector(`.${className}`).querySelectorAll("span")[1]
el.style.display = "none"
return event
});
})();
シンプル構成ですが、もみじさんの通りクラス名を調べて上記のclassNameを書き換えて試していただければです
もみじ様
pomo様
返信をいただきありがとうございます。
ご助言いだだきました内容で、実践してみましたが、*が消えない状態となっております。
GoogleChromeで検証からクラス名を調べ、pomo様にご助言いただきましたプログラムに当てはめてみましたが、表示される状態です。
記入内容に誤りがありますでしょうか?
度々申し訳ありませんが、ご教示いただけないでしょうか?
(() => {
'use strict';
kintone.events.on(['app.record.create.show','app.record.edit.show'], (event) => {
const className = "require-cybozu"
const el = document.querySelector(`.${className}`).querySelectorAll("span")[1]
el.style.display = "none"
return event
});
})();
※GoogleChromeの検証で表示された内容となります。

※反映後の画面となります。

大変申し訳ありませんがよろしくお願いいたします。
Maple
(もみじ)
7

ラジオボタンのクラス名はこんな風になってますよね。
この control-gaia control-single_check-field-gaia
というのが
ラジオボタン固有のクラス名なので、その下位にある必須項目マークの
クラス名 require-cybozu
を対象に display: none すればいいです。
.control-gaia.control-single_check-field-gaia .require-cybozu {
display: none;
}
この3行のCSSだけで消せます。
pomo
8

親階層の label-●●●というクラス名をコピーしてみてください。
もみじ様
pomo様
お忙しい中、ご教示いただきありがとうございました。
教えていただきました内容で、無事できました。
本当にありがとうございました。
「いいね!」 1
system
(system)
クローズされました:
10
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。