選択前後でボタンの色が変わるように設定したい | コミュニティ

タグ付き： widget, アンケート, アンケート（複数選択・単一選択・yes/no・ボタンを押すと下部表示）※要javascript(アンケート)

コミュニティ

選択前後でボタンの色が変わるように設定したい

トピックス by widget初心者 1792 pt 2023年9月15日 14:18 1108 PV
【Widget名】

アンケート（複数選択・単一選択・yes/no・ボタンを押すと下部表示）※要javascript(アンケート)

【修正したいこと】

「次へ」ボタンが全部で4つあるのですが、それぞれ対応する直前のチェックボックス・ラジオボタンを選択するとボタンの色が変化する、という設定にしたいです！
- 選択前：#e7e2d4
- 選択後：#d55a40
- ボタンクリック後：#8c8c8c
【参考画像】

https://drive.google.com/file/d/1decTgf2tzLrzu71H_iw2gM63lhM6mvzl/view
widgetマスター 1 年, 2 月前 2 人 · 1 コメント
1 コメント

widgetマスター

モデレータ

2023年9月15日 15:46

ボタンの状態に応じてカラーを変更する方法の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; /* クリック後はボタンを無効化 */
}