メールフォームプロという無料のメールフォームを使用しています。
https://teratail.com/questions/114662
こちらを見て参考にさせていただき、自分でやってみましたが、知識が乏しくつまづいてしまいました。
必須項目以外の希望公演を「17)選択なし」を選んだ際、「招待券・枚数」と、「追加購入・枚数」が選択できないように無効にしたいです。
また、先に枚数が指定されていると、後から「17)選択なし」を選択した際、0 に戻らないため、確認フォームに枚数が送信されてしまいます。
「17)選択なし」を選択した際、「招待券・枚数」と、「追加購入・枚数」を無効にしたいのと、それに合わせて枚数を「0」に戻すように設定したいです。
知識がなくて申し訳ありません。
どのようにしたらいいのか、どうかアドバイスをいただけないでしょうか。
発生している問題・エラーメッセージ
<script> $(function() { document.getElementById("ticketsheets").disabled = "true"; $("#performancelist").change(function(){ if($(this).val()=="17)選択なし"){ $("#ticketsheets").prop('disabled', true); } else { $("#ticketsheets").prop('disabled', false); } }); }); </script>
該当のソースコード
<!--メールフォームプロ--> <form id="mailformpro" class="form-horizontal" action="mailformpro/mailformpro.cgi" method="POST"> <div class="mfp_phase" summary="チケット申し込み内容"> <input type="hidden" name="お名前" data-unjoin="姓+ +名+(+セイ+ +メイ+)" value=""> <!-- <div class="form-group"> <label class="col-sm-3 control-label">郵便番号<span class="must">[必須・半角]</span></label> <div class="col-sm-2 controls"> <input type="hidden" name="ご住所" data-join="〒+郵便番号+\n+都道府県+市区町村+丁目番地" value=""> <input ype="text" class="form-control input-sm" name="郵便番号" required="required" data-address="都道府県,市区町村,市区町村"> </div> </div>.form-group --> <div class="form-group"> <label class="col-xs-12 col-sm-3 control-label">お名前<span class="must">[必須]</span></label> <div class="col-xs-6 col-sm-4 controls"> <input type="text" class="form-control input-sm" name="姓" data-kana="セイ" required="required" placeholder="姓"> </div> <div class="col-xs-6 col-sm-4 controls"> <input type="text" class="form-control input-sm" name="名" data-kana="メイ" required="required" placeholder="名"> </div> </div><!-- .form-group --> <div class="form-group"> <label class="col-xs-12 col-sm-3 control-label">フリガナ<span class="must">[必須]</span></label> <div class="col-xs-6 col-sm-4 controls"> <input type="text" class="form-control input-sm" name="セイ" data-charcheck="kana" required="required" placeholder="セイ"> </div> <div class="col-xs-6 col-sm-4 controls"> <input type="text" class="form-control input-sm" name="メイ" data-charcheck="kana" required="required" placeholder="メイ"> </div> </div><!-- .form-group --> <div class="form-group"> <label class="col-sm-3 control-label">電話番号<span class="must">[必須]</span></label> <div class="col-sm-3 controls"> <input type="tel" class="form-control input-sm" data-type="tel" name="電話番号" required="required" placeholder="000-000-0000"> </div> </div><!-- .form-group --> <div class="form-group"> <label class="col-sm-3 control-label">メールアドレス<span class="must">[必須]</span></label> <div class="col-sm-6 controls"> <input type="email" class="form-control input-sm" data-type="email" name="email" required="required" placeholder="aaa@bbb.net"> </div> </div><!-- .form-group --> <div class="form-group"> <label class="col-sm-3 control-label">確認用メールアドレス<span class="must">[必須]</span></label> <div class="col-sm-6 controls"> <input type="email" class="form-control input-sm" data-type="email" name="confirm_email" required="required" placeholder="aaaa@bbb.net"> </div> </div><!-- .form-group --> <dd class="mfp"> <ul> <li><label><input type="radio" name="入会口数" value="1口入会" id="enrollment1" data-toggle="deliveryTime" data-toggle-hide="1" /> 1口入会</label></li> <li><label><input type="radio" name="入会口数" value="2口入会" id="enrollment2" data-toggle="deliveryTime2" data-toggle-hide="1"/> 2口入会</label></li> </ul> <span>※入会口数を選択してください。</span> </dd> </dl> <dl class="mailform" id="deliveryTime"> <dd class="mfp"> <!-- .form-group 希望公演1つ目--> <!-- .form-group 希望公演1つ目--> <!-- .form-group 希望公演2つ目--> <div class="form-group"> <label class="col-sm-3 control-label">希望公演</label> <div class="col-sm-8 controls"> <div class="form-group"> <div class="col-sm-12 controls"> <select name="【1口入会】(2)希望公演" id="performancelist" class="form-control input-sm"> <option value="" selected="selected">選択して下さい</option> <option value="1)の公演">1)の公演</option> <option value="2)の公演">2)の公演</option> <option value="10)の公演">10)の公演</option> <option value="17)選択なし">17)選択なし</option> </select> </div> </div><!-- .form-group --> </div><!-- 。col 希望公演 --> <label class="col-sm-3 control-label">招待券・枚数</label> <div class="col-sm-8 controls"> <div class="form-group"> <div class="col-xs-3 col-sm-2 controls"> <select name="【1口入会】(2)招待券・枚数" id="ticketsheets" data-format="$1 枚" class="form-control input-sm"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </div> <div class="col-xs-1 controls"> <p class="form-control-static">枚</p> </div> </div><!-- .form-group 招待券・枚数--> </div> <label class="col-sm-3 control-label">追加購入・枚数</label> <div class="col-sm-8 controls"> <div class="form-group"> <div class="col-xs-3 col-sm-2 controls"> <select name="【1口入会】(2)追加購入・枚数" id="ticketsheets" data-format="$1 枚" class="form-control input-sm"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </div> <div class="col-xs-1 controls"> <p class="form-control-static">枚</p> </div> </div><!-- .form-group 追加購入・枚数--> </div> </div><!-- .form-group 希望公演2つ目--> </dd> </dl> <!--以下2口会員 --> <dl class="mailform" id="deliveryTime2"> <dd class="mfp"> <!-- .form-group 希望公演1つ目--> <!-- .form-group 希望公演1つ目--> </dd> </dl> <!-- .form-group 備考欄--> <div class="form-group"> <label class="col-sm-3 control-label">備考欄</label> <div class="col-sm-8 controls"> <textarea class="form-control" name="備考欄" rows="14"></textarea> </div> </div><!-- .form-group 備考欄--> <div class="form-group"> <label class="col-sm-3 control-label">確認事項<span class="must">[必須]</span></label> <div class="col-sm-8 controls"> <ul class="check"> <li>下記を確認後チェックを入れてください。</li> </ul> <input type="checkbox" required="required" data-exc="1" name="確認事項1" value="確認チェック済:会員期間内に4枚(ご入会一口につき)の招待券をお申込みいただけます。" id="kakunin" class="css_checkbox"><label for="kakunin" class="css_label">会員期間内に4枚(ご入会一口につき)の招待券をお申込みいただけます。</label> </div> </div><!-- .form-group--> </div><!-- .mfp_phase --> <div class="mfp_buttons"> <div class="row"> <div class="col-xs-6 col-sm-offset-3 col-sm-3"> <button type="submit" class="btn">確認する</button> </div> <div class="col-xs-6 col-sm-3"> <button type="reset" class="btn">リセット</button> </div> </div> </div><!-- .mfp_button --> </form> <script type="text/javascript" id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script> <!--/メールフォームプロ--> <div class="inner"> <p class="text-note"></p> </div><!-- .inner --> </div><!-- .line --> </div><!-- .container --> </article> </div><!-- #content --> <p class="pagetop"><a href=".header_container">▲</a></p> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/script.js"></script> <script> $(function() { document.getElementById("ticketsheets").disabled = "true"; $("#performancelist").change(function(){ if($(this).val()=="17)選択なし"){ $("#ticketsheets").prop('disabled', true); } else { $("#ticketsheets").prop('disabled', false); } }); }); </script> </body> </html>
試したこと
<script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ if($(":selected").val()=="17)選択なし"){ (":text").attr("disabled","disabled"); $("select[name='2口入会】(4)招待券・枚数']").attr("disabled","disabled"); }else{ $(":text").removeAttr("disabled"); $("select[name='2口入会】(4)招待券・枚数']").removeAttr("disabled"); } }); }); </script>
上記のようなものも試した見たのですが、こちらはメールフォームプロの外側に該当のhtmlを出さないと設定ができませんでした。(ページデザイン外)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。