問い合わせフォームを入力完了したらボタンがableになり送信できるように

お問い合わせフォームの項目を全て入力したら、ボタンが押せるようになる仕組みを作ろうとしています。
index.htmlでローカル環境で見ている分にはど動作するのですが、WordPressに写すと動かなくなります。
フォームの実装はcontact form7というプラグインを使用しています。

入力していない状態が灰色、入力すると赤色になるようにしています。

★現在の状況
WordPressでは、何も入力していない状態だと赤色、
入力するとなぜか灰色に変わり、
入力を完了してもボタンが押せないという状態です。

★試したこと
$をjQueryに変更し、WordPressでも使えるように
キャッシュなどの削除やパソコンの再起動
個別のID指定ではなく、共通のクラスをinputやtextareaに変えてみたりしたが、ボタンはずっと赤色でした。

contact form 7自体にはこのような機能が無いため、自分でjQueryで構築する必要があります。

html
1/*　ローカル環境できちんと作動する分 */
2<section id="form" class="form">
3<div class="content cf">
4<div class="form-title"><img src="img/form_ttl_01_pc.png" alt="今すぐ無料で相談する" class="pc"><img src="img/form_ttl_01.png" alt="今すぐ無料で相談する" class="sp"></div>
5<script type="text/javascript">
6    window.onunload = function(){};
7    history.forward();
8</script>
9<div class="cotact_box">
10<form method="post" action="#form" id="contactform">
11        <div class="form-box">
12        <div class="form-box-left">
13            <label>お名前（法人名）<span class="red">必須</span></label><br>
14            <input required id="your_name" type="text" name="your_name" value="">
15            <label>お電話番号<span class="red">必須</span></label><br>
16            <input required id="telephone" type="text" name="telephone" value="">
17            <label>メールアドレス<span class="red">必須</span></label><br>
18            <input required id="email" type="text" name="email" value="">
19            </div>
20            <div class="form-box-right">
21                <label>ご相談内容<span class="red">必須</span></label><br>
22                <textarea name="contact" id="contact" required></textarea>
23            </div>
24        </div>
25        <div class="agreement"><label><input type="checkbox" id="check" value="" required />
26            <a href="https://cryptopie.co.jp/privacy-policy/" target="_blank">プライバシーポリシー</a>を確認し、同意しました。<span class="red">必須</span></label>
27        </div>
28        <div class="submit">
29            <input id="send" type="submit" class="send" name="btn_submit" value="ご入力内容を送信する">
30            <p><strong>※すべて必須項目となります</strong></p>
31        </div>
32</form>
33</div>
34</div>
35</section>

html
1/* contact form-7での入力している分です */
2<div class="form-box">
3<div class="form-box-left">
4<label>お名前（法人名）<span class="red">必須</span></label><br>
5[text* text-180 id:your_name]
6
7
8<label>お電話番号<span class="red">必須</span></label><br>
9[text* tel id:telephone]
10
11<label>メールアドレス<span class="red">必須</span></label><br>
12[text* email id:email]
13</div>
14
15<div class="form-box-right">
16<label>ご相談内容<span class="red">必須</span></label><br>
17[textarea* textarea-363 id:contact]
18</div>
19</div>
20<div class="agreement">
21<label>
22[checkbox* checkbox-410 id:check "a"]
23<a href="https://cryptopie.co.jp/privacy-policy/" target="_blank">プライバシーポリシー</a>を確認し、同意しました。<span class="red">必須</span></label>
24</div>
25<div class="submit">
26[submit id:send class:send "ご入力内容を送信します"]</div>
27<p class="contact-required">※すべて必須項目となります</p>

jquery
1jQuery(function(){
2jQuery("#send").prop("disabled", true);
3jQuery("input,textarea").on("keydown keyup keypress change", function() {
4    if (jQuery("#your_name").val().length > 0 && jQuery("#telephone").val().length > 0 && jQuery("#email").val().length > 0 && jQuery("#contact").val().length > 0 && jQuery("#check").prop("checked") == true){
5        jQuery("#send").prop("disabled", false);
6    } else {
7        jQuery("#send").prop("disabled", true);   
8    }
9});
10});
11

css
1jQuery(function(){
2jQuery("#send").prop("disabled", true);
3jQuery("input,textarea").on("keydown keyup keypress change", function() {
4    if (jQuery("#your_name").val().length > 0 && jQuery("#telephone").val().length > 0 && jQuery("#email").val().length > 0 && jQuery("#contact").val().length > 0 && jQuery("#check").prop("checked") == true){
5        jQuery("#send").prop("disabled", false);
6    } else {
7        jQuery("#send").prop("disabled", true);   
8    }
9});
10});
11
12
13

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

回答1件

ベストアンサー

こんにちは。

WordPressでは、何も入力していない状態だと赤色、入力するとなぜか灰色に変わり

そういうことでしたら、ボタンのdisabledをtrueに変えるところとfalseに変えるところを逆にすれば良いのではないでしょうか。

JavaScript
1jQuery(function(){
2jQuery("#send").prop("disabled", true);
3jQuery("input,textarea").on("keydown keyup keypress change", function() {
4    if (jQuery("#your_name").val().length > 0 && jQuery("#telephone").val().length > 0 && jQuery("#email").val().length > 0 && jQuery("#contact").val().length > 0 && jQuery("#check").prop("checked") == true){
5        jQuery("#send").prop("disabled", true); // ここと
6    } else {
7        jQuery("#send").prop("disabled", false); // ここを逆にしてみる
8    }
9});
10});