サポート » プラグイン » ContactForm7にチェックボックスとラジオボタンを配置し、jQueryで制御

  • こんにちわ。初めて質問いたします。

    ContactForm7にチェックボックスとラジオボタンを配置し、jQueryで制御しようとしているのですが、ローカルでは問題ない動作がWP上では正常に動作しません。

    素人が作っておりますので至らない点が多いと思いますが、ご教示頂けると助かります。詳細は以下の通りです。

    サーバー:XSERVER
    ContactForm7 4.2.2
    jQuery 2.1.4 
     header.phpでWP本体のjQueryを無効にした後2.1.4を有効にしている

    ContactFormに親要素としてチェックボックスを6個置き、その子要素としてラジオボタンを複数個配置。
    ①チェックボックスを4個選択すると他のチェックボックスはクリックできないように制限。
    ②親のチェックボタンが選択されないと子のラジオボタンはクリックできないように制限。

    ①は動くが②が動きません。
    Webに書かれている事はたいてい試しましたがだめでした。

    《動く中身》
    <script type=”text/javascript”>  ←scripts.js内では外します
    $(function(){  ←scripts.js内では外します
    $(“input[type=checkbox]”).click(function(){
    var $count = $(“input[type=checkbox]:checked”).length;
    var $not = $(‘input[type=checkbox]’).not(‘:checked’)
    //チェックが4つ付いたら、チェックされてないチェックボックスにdisabledを加える
    if($count >= 4) {
    $not.attr(“disabled”,true);
    }else{
    //1つ以下ならdisabledを外す
    $not.attr(“disabled”,false);
    }
    });
    });  ←scripts.js内では外します
    </script>  ←scripts.js内では外します

    《動かない中身》

    //ページを開いた段階でラジオボタンを無効にしておきます。
    <script>  ←scripts.js内では外します
    $(function(){   ←scripts.js内では外します
    $(‘#id-A’).ready(function(){
    if ($(this).is(‘:checked’)) {
    $(‘.class-A’).prop(‘disabled’, false);
    } else {
    $(‘.class-A’).prop(‘disabled’, true);
    }
    });
    });  ←scripts.js内では外します
    </script>  ←scripts.js内では外します

    //親のチェックボックスをオンにしたら子のラジオボタンを選択可能にします。
    <script>  ←scripts.js内では外します
    $(function(){  ←scripts.js内では外します
    $(‘#id-A’).on(‘change’, function(){
    if ($(this).is(‘:checked’)) {
    $(‘.class-A’).prop(‘disabled’, false);
    } else {
    $(‘.class-A’).prop(‘disabled’, true);
    }
    });
    });  ←scripts.js内では外します
    </script>  ←scripts.js内では外します

    《これまでに試した事》
    ・header.phpに<?php wp_head(); ?>がある事を確認
    ・jQueryコードのカプセル化(以下で囲む)
    (function($){
    // foo
    })(jQuery);
      ↑もう書かれてました。
    ・$をjQueryと書き換えてみる
    ・attrがjQuery1.6以降仕様変更されたというのでpropに変えてみる
     (ローカルではattrでもpropでも動く)
    $(‘.class-A’).attr(‘disabled’, false);

    $(‘.class-A’).prop(‘disabled’, false);
    ・どこのファイルに書くか問題
    ・contact-form-7/includes/js/scripts.js
    ・ブログ名/public_html/wp-content/themes/twentyfourteen/header.php
    ・コンタクトフォームの編集画面
    ・jQueryどのバージョンを使うか?問題
    WP本体のjQueryバージョンに仕様を合わせてもダメ、
    WP本体のjQueryを無効にして最新の2.1.4を読み込ませてもダメ。

    ひとまず以上です。
    jQueryは借り物のスライダーくらいしか設置した事がなくWordPressも避けて通ってきましたのでチンプンカンプンです。
    よろしくお願いします。

    [モデレーター編集: トピックタイトルが空でアクセスできなかったため、タイトルを設定しました。]

  • トピック「ContactForm7にチェックボックスとラジオボタンを配置し、jQueryで制御」には新たに返信することはできません。