ボタンの状態に応じてカラーを変更する方法の1例をご紹介させていただきます。

1. 選択肢のチェック状態によりボタンの状態が変化するように設定

JavaScript Head内のrevealBtnFncMulti の _.init = function() {…} 内に

選択肢のチェック状態のチェック状態によりボタンの状態を変化させる下記コードを追加します。

_.init = function() {
    var questionBox = Array.from(document.querySelectorAll('.js-questionRevealMulti'));
    var hiddenClass = 'hidden'; // 'is-hidden'から'hidden'に変更
    questionBox.forEach(function(qb) {
        var completeBtn = qb.querySelector('.js-send');
        var revealArea = qb.querySelector('.js-reveal');
        // ★ 追加ここから ↓↓
        const inputs = Array.from(qb.querySelectorAll('input'));
        qb.addEventListener('change', function() {
            const checkedInputs = inputs.filter(input => input.checked);
            if(qb.querySelector('button')) {
              if(checkedInputs.length > 0) {
                qb.querySelector('button').disabled = false;
              } else {
                qb.querySelector('button').disabled = true;
              }
            }
        });
        // ★ 追加ここまで ↑↑
        if(completeBtn) { // ← 現在のHTML構成によるエラー回避のためここに1行追加
          completeBtn.addEventListener('click', function() {
            revealArea.classList.toggle(hiddenClass);
            var targetOffsetTop = window.pageYOffset + revealArea.getBoundingClientRect().height;
            window.scrollTo({
                top: targetOffsetTop,
                behavior: 'smooth',
            });
          });
        } // ← 現在のHTML構成によるエラー回避のためここに1行追加
    });
};

2. ボタンの初期状態およびボタンクリック時に状態を変化させるコードを追加

JavaScript Head内btnVisibleFunc の _.btnAction = function(el) {…} 内に下記コードを追加します。

_.btnAction = function(el) {
    let btn = el.querySelector('.js-btn');
    let content = el.querySelector('.js-content');
    // ★ ボタン初期無効化 追加ここから ↓↓
    btn.disabled = true;
    // ★ ボタン初期無効化 追加ここまで ↑↑
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        // ★ クリックステータスを追加 ここから ↓↓
        btn.classList.add('is-clicked');
        // ★ クリックステータスを追加 ここまで ↑↑
        content.classList.add('is-active');
        content.style.height = content.scrollHeight + 'px';
        setTimeout(scroll, 300);
    }, {
        once: true
    });
    function scroll() {
        content.scrollIntoView({
            behavior: 'smooth'
        });
    }
};

3. ボタンの状態によりカラーを変化させるCSSを追加

WidgetのCSS内に以下のコードを追加します。

.btnVisible__area .btn:disabled {
  background: #e7e2d4; /* ボタン無効時のカラー */
}
.btnVisible__area .btn.is-clicked {
  background: #8c8c8c; /* ボタンクリック時のカラー */
  pointer-events: none; /* クリック後はボタンを無効化 */
}