メールフォームプロで特定の選択メニューを選択したら別の選択メニュー自体を無効にする

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 870

nonameFeel

score 6

メールフォームプロという無料のメールフォームを使用しています。
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を出さないと設定ができませんでした。(ページデザイン外)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

ID一つのページに一つしか指定できないので、「追加購入・枚数」の方は、「ticketsheets_add」などと変更しましょう。
また、「disabled」を操作する部分で、素のjavascriptとjQueryが混在しているので、jQueryに変更した方が良いです。
あとは.val(0)で値を0にさせ、
セレクタで対象を追加購入・枚数の方にも当てれば動作するはずです。

$(function() { 
    $("#ticketsheets, #ticketsheets_add").prop('disabled', true); 

    $("#performancelist").change(function(){

        if($(this).val()=="17)選択なし"){
            $("#ticketsheets, #ticketsheets_add").val(0); 
            $("#ticketsheets, #ticketsheets_add").prop('disabled', true); 
        } else { 
            $("#ticketsheets, #ticketsheets_add").prop('disabled', false); 
        }
    });
}); 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/23 17:06

    script.jsの中の、$(document).ready(function() { ... }の中に、って意味でした。
    力になれずにすみません、もし何か分かったら、また連絡します。

    キャンセル

  • 2018/03/23 17:20

    script.jsの中の、$(document).ready(function() { ... } やってみたのですが、やはり同じでした。
    詳細に調べて下さりありがとうございます。何かわかりましたら、どうぞよろしくお願いいたします。
    私もいろいろ試してみます。

    キャンセル

  • 2018/04/26 23:51

    該当行動ソース内の下記の部分を削除したら、選択ができないように設定されました。
    ただ、この部分のどこが影響していたのかまではつかめませんでした。
    もしわかりましたら方法を教えていただけないでしょうか。

    <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>

    キャンセル

0

だいぶ時間が経ってしまい申し訳ありません。
いろいろ試してみたり、1つ1つ検証してみたら、同じ動作?scriptを一つにしたら動かすことができました。同じページで同時に機能しないことがわかりました。
同時に機能する方法もありそうなのですが、現時点ではそこまでしかわからずでした。
親身にご回答下さりありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる