コンタクトフォーム７　Contact Form 7 add confirm　確認画面でチェックしていないチェックボックスを非表示にしたい

コンタクトフォーム７にて確認画面の表示をした際に
チェックボックスのチェックした以外の項目を消えるようにしたいのですが、どうもうまくいきません。

下記ページのようなものが理想で
例えば『パンフレット（募集要項付）請求』のみにチェックを入れて
確認画面では他の編入学・大学院資料請求、オープンキャンパス、学校見学
の項目は削除するといった実装です。

https://www.kyotokango.ac.jp/request/

Contact Form 7 add confirmのプラグインで確認画面を作っています。

コンタクトフォーム７のコード⬇︎

<div class="contactBlock">
    <dl>
        <dt>hogehoge</dt>
        <dd>[checkbox* checkbox-9 "a" "b" "c" "d"]</dd>
    </dl>

    <dl>
        <dt>hogehogehoge</dt>
        <dd>[radio radio-869 default:1 "radio1" "radio2"]</dd>
    </dl>

<div class="btns"> [confirm id:conformbtn "確認画面へ"]</div>
<div class="formbtn">[back id:backbtn "戻る"][submit id:formbtn "送信"]</div>
</div>

お問い合わせ画面のページソース⬇︎

<div class="mainContents">
    <article id="post-18" class="page post-18 type-page status-publish hentry">
        <h1 class="type-A">お問い合わせ</h1>
        <section class="content">
            <div role="form" class="wpcf7" id="wpcf7-f32-p18-o1" lang="ja" dir="ltr">
                <div class="screen-reader-response"></div>
                <form action="/contact/#wpcf7-f32-p18-o1" method="post" class="wpcf7-form" novalidate="novalidate">
                    <div style="display: none;">
                        <input type="hidden" name="_wpcf7" value="32" />
                        <input type="hidden" name="_wpcf7_version" value="5.1.3" />
                        <input type="hidden" name="_wpcf7_locale" value="ja" />
                        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f32-p18-o1" />
                        <input type="hidden" name="_wpcf7_container_post" value="18" />
                    </div>
                    <div class="contactBlock">
                        <dl>
                            <dt>hogehoge</dt>
                            <dd><span class="wpcf7-form-control-wrap checkbox-9"><span
                                        class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span
                                            class="wpcf7-list-item first"><input type="checkbox" name="checkbox-9[]"
                                                value="a" /><span class="wpcf7-list-item-label">a</span></span><span
                                            class="wpcf7-list-item"><input type="checkbox" name="checkbox-9[]"
                                                value="b" /><span class="wpcf7-list-item-label">b</span></span><span
                                            class="wpcf7-list-item"><input type="checkbox" name="checkbox-9[]"
                                                value="c" /><span class="wpcf7-list-item-label">c</span></span><span
                                            class="wpcf7-list-item last"><input type="checkbox" name="checkbox-9[]"
                                                value="d" /><span
                                                class="wpcf7-list-item-label">d</span></span></span></span></dd>
                        </dl>
                        <dl>
                            <dt>hogehogehoge</dt>
                            <dd><span class="wpcf7-form-control-wrap radio-869"><span
                                        class="wpcf7-form-control wpcf7-radio"><span
                                            class="wpcf7-list-item first"><input type="radio" name="radio-869"
                                                value="radio1" checked="checked" /><span
                                                class="wpcf7-list-item-label">radio1</span></span><span
                                            class="wpcf7-list-item last"><input type="radio" name="radio-869"
                                                value="radio2" /><span
                                                class="wpcf7-list-item-label">radio2</span></span></span></span></dd>
                        </dl>
                        <div class="btns"> <input type="submit" value="確認画面へ"
                                class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm wpcf7c-force-hide"
                                id="conformbtn" /></div>
                        <div class="formbtn"><input type="button" value="戻る"
                                class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back wpcf7c-force-hide"
                                id="backbtn" /><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit"
                                id="formbtn" /></div>
                    </div>
                    <div class="wpcf7-response-output wpcf7-display-none"></div>
                </form>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </section><!-- /.content -->
    </article><!-- /.news -->
</div><!-- /.mainContents -->

確認画面のページソース⬇︎

<div class="mainContents">
    <article id="post-18" class="page post-18 type-page status-publish hentry">
        <h1 class="type-A">お問い合わせ</h1>
        <section class="content">
            <div role="form" class="wpcf7" id="wpcf7-f32-p18-o1" lang="ja" dir="ltr">
                <div class="screen-reader-response"></div>
                <form action="/contact/#wpcf7-f32-p18-o1" method="post" class="wpcf7-form" novalidate="novalidate">
                    <div style="display: none;">
                        <input type="hidden" name="_wpcf7" value="32" />
                        <input type="hidden" name="_wpcf7_version" value="5.1.3" />
                        <input type="hidden" name="_wpcf7_locale" value="ja" />
                        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f32-p18-o1" />
                        <input type="hidden" name="_wpcf7_container_post" value="18" />
                    </div>
                    <div class="contactBlock">
                        <dl>
                            <dt>hogehoge</dt>
                            <dd><span class="wpcf7-form-control-wrap checkbox-9"><span
                                        class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span
                                            class="wpcf7-list-item first"><input type="checkbox" name="checkbox-9[]"
                                                value="a" /><span class="wpcf7-list-item-label">a</span></span><span
                                            class="wpcf7-list-item"><input type="checkbox" name="checkbox-9[]"
                                                value="b" /><span class="wpcf7-list-item-label">b</span></span><span
                                            class="wpcf7-list-item"><input type="checkbox" name="checkbox-9[]"
                                                value="c" /><span class="wpcf7-list-item-label">c</span></span><span
                                            class="wpcf7-list-item last"><input type="checkbox" name="checkbox-9[]"
                                                value="d" /><span
                                                class="wpcf7-list-item-label">d</span></span></span></span></dd>
                        </dl>
                        <dl>
                            <dt>hogehogehoge</dt>
                            <dd><span class="wpcf7-form-control-wrap radio-869"><span
                                        class="wpcf7-form-control wpcf7-radio"><span
                                            class="wpcf7-list-item first"><input type="radio" name="radio-869"
                                                value="radio1" checked="checked" /><span
                                                class="wpcf7-list-item-label">radio1</span></span><span
                                            class="wpcf7-list-item last"><input type="radio" name="radio-869"
                                                value="radio2" /><span
                                                class="wpcf7-list-item-label">radio2</span></span></span></span></dd>
                        </dl>
                        <div class="btns"> <input type="submit" value="確認画面へ"
                                class="wpcf7-form-control wpcf7-confirm wpcf7c-elm-step1 wpcf7c-btn-confirm wpcf7c-force-hide"
                                id="conformbtn" /></div>
                        <div class="formbtn"><input type="button" value="戻る"
                                class="wpcf7-form-control wpcf7-back wpcf7c-elm-step2 wpcf7c-btn-back wpcf7c-force-hide"
                                id="backbtn" /><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit"
                                id="formbtn" /></div>
                    </div>
                    <div class="wpcf7-response-output wpcf7-display-none"></div>
                </form>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </section><!-- /.content -->
    </article><!-- /.news -->
</div><!-- /.mainContents -->

→この確認画面でチェックボックス（ラジオボタン）および、選択していない文字（bを選択していたら、それ以外のacd）を非表示にしたいです。

戻ると他の選択肢が消えてしまいます。。。

行動規範の内容に同意します

回答3件

JavaScriptでdisplay:noneで非表示になっています。
PHPを修正して表示させないことも可能ですが
JavaScriptで処理したほうが簡単です。

投稿2019/07/06 01:31

yasutomi

総合スコア2941

kii.32

2019/07/06 03:04

ありがとうございます。確認画面でのみdisplay:noneで非表示にするためにはどのような処理が適切なのでしょうか。。。確認画面と確認画面前でチェックボックス、ラジオボタンに対するクラス名も特に変わっておらず、、、私の勉強不足で大変心苦しいのですが、お教えいただけますと幸いでございます。

行動規範の内容に同意します

これはJSで動いているのでしょうか。

ブラウザでソースを表示したり開発者ツール使えばすぐわかると思いますが。
これですかね。

投稿2019/07/06 00:13

gentaro

総合スコア8947

ベストアンサー

参考にされているサイトでは、申し込みフォームページで読み込まれている form.js の127~153行目あたりで処理しています。

必要な部分を抜き出すとこのような感じです。

js
1(function ($) {
2  document.addEventListener('wpcf7submit', function (event) {
3    switch (event.detail.status) {
4      case 'wpcf7c_confirmed':
5        $('.wpcf7-form input[type=checkbox]').each(function () {
6          if ($(this).prop('checked') === false) {
7            $(this).closest('.wpcf7-list-item').hide()
8          } else {
9            $(this).hide()
10          }
11        })
12        $('.wpcf7-form input[type=radio]').each(function () {
13          if ($(this).prop('checked') === false) {
14            $(this).closest('.wpcf7-list-item').hide()
15          } else {
16            $(this).hide()
17          }
18        })
19        break
20    }
21  }, false)
22
23  // 戻るボタンで戻った場合に再度表示させる.
24  $('#backbtn').on('click', function () {
25    $('.wpcf7-form input[type=checkbox]').each(function () {
26      var parent = $(this).closest('.wpcf7-list-item')
27      parent.show()
28      $(this).show()
29    })
30
31    $('.wpcf7-form input[type=radio]').each(function () {
32      var parent = $(this).closest('.wpcf7-list-item')
33      parent.show()
34      $(this).show()
35    })
36
37    $('form').removeClass('custom-wpcf7c-confirmed')
38  })
39})(window.jQuery)
40

追記

ただ、確認画面から戻るを押した際に元のチェックしていなかったボタンが消えてしまいました。
なんとか、コードを探そうと調べたのですが、どうしてもうまくいかず、恐れ入りますがお分かりでしたら教えていただきたいです。

同じファイルの184~215行目がそれに当たります。
上記コードに必要なものを追記しました。

投稿2019/07/06 07:28

編集2019/07/06 16:14

YukiYamashina

総合スコア1011

kii.32

2019/07/06 15:51

ご回答ありがとうございます！！無事消すことができました！ただ、確認画面から戻るを押した際に元のチェックしていなかったボタンが消えてしまいました。なんとか、コードを探そうと調べたのですが、どうしてもうまくいかず、恐れ入りますがお分かりでしたら教えていただきたいです。確認画面から戻った画面の画像も合わせてアップしました。

kii.32

2019/07/07 12:02

ありがとうございます！無事希望通り実装できました！

行動規範の内容に同意します

あなたの回答