フォームブリッジのチェックBOX確認メッセージ

kintone カスタマイズ
1

フォームブリッジに「依頼辞退」と言うチェックBOXが有り
このチェックBOXにチェックを付けるときに確認メッセージを表示し
「OK」が押されたらチェックを入れる
「キャンセル」が押されたらチェックを外すとしたいです。

下記コードを実装しましたが「OK」を押してもチェックが入りません。
どのように修正したらいいでしょうか？

コードをここに入力または貼り付け

document.addEventListener('DOMContentLoaded', function() {
    // ダイアログを動的に追加
    let dialog = document.createElement('div');
    dialog.id = 'customConfirm';
    dialog.style.display = 'none';
    dialog.style.position = 'fixed';
    dialog.style.zIndex = '1000';
    dialog.style.top = '50%';
    dialog.style.left = '50%';
    dialog.style.transform = 'translate(-50%, -50%)';
    dialog.style.background = 'white';
    dialog.style.padding = '20px';
    dialog.style.border = '1px solid #ccc';
    dialog.style.textAlign = 'center';
    dialog.style.width = '300px';

    // コーションマークとメッセージ
    dialog.innerHTML = `
        <p style="font-size: 30px; color: red;">⚠️</p>
        <p>依頼を辞退しますか？</p>
        <button id="confirmOk" style="margin-right:10px;">OK</button>
        <button id="confirmCancel">キャンセル</button>
    `;

    // ダイアログをボディに追加
    document.body.appendChild(dialog);

    // チェックボックスの要素を取得
    let checkBox = document.querySelector('input.el-checkbox__original[value="依頼辞退"]');
    let customConfirm = document.getElementById('customConfirm');

    // チェックボックスにイベントリスナーを追加
    checkBox.addEventListener('click', function(event) {
        // デフォルトのチェック動作を防ぐ
        event.preventDefault();
        
        // チェックボックスがチェックされる前にカスタム確認ダイアログを表示
        customConfirm.style.display = 'block';
    });

    // OKボタンを押したときの処理
    document.getElementById('confirmOk').onclick = function() {
        checkBox.checked = true;  // チェックを手動で入れる
        customConfirm.style.display = 'none'; // ダイアログを閉じる
    };

    // キャンセルボタンを押したときの処理
    document.getElementById('confirmCancel').onclick = function() {
        checkBox.checked = false;  // チェックを外す
        customConfirm.style.display = 'none'; // ダイアログを閉じる
    };
});
2

JSを下記のように変更しましたがメッセージは出るのですが
チェックBOXの状態が変わりません
どなたかご教授頂けないでしょうか
よろしくお願いします

document.addEventListener(‘DOMContentLoaded’, function() {
setTimeout(function() {
const checkboxLabel = document.querySelector(“label.el-checkbox”);
const checkbox = checkboxLabel ? checkboxLabel.querySelector(“input[type=‘checkbox’]”) : null;

    if (checkbox) {
        checkboxLabel.addEventListener('click', function(event) {
            const isChecked = checkbox.checked;
            const message = isChecked ? "チェックを外しますか？" : "チェックを付けますか？";
            
            if (confirm(message)) {
                checkbox.checked = !isChecked;
                console.log("チェックボックスの状態が変更されました:", checkbox.checked);
            } else {
                console.log("チェックボックスの状態は変わりません:", isChecked);
            }

            event.preventDefault();
        });
    } else {
        console.log("チェックボックスが見つかりません");
    }
}, 500);  // 500ミリ秒待機

});