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

Question

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

Answer 1

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

Answer 2

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); 
        }
    });
}); 

Comments

[nonameFeel]

早々にご回答下さりありがとうございます。
あてはめてみたのですが、最初の1回は選択できなくなりますが、別の項目を選択し、再度　選択なしにした時には、アクティブになってしまいます。
また、選択できない状態になっても、ページのどこか何もないところを一度クリックすると選択できなかった選択メニューが有効なってしまうようです。
私の入れ方が悪いのかとは思うのですが、いかがでしょうか。

[nonameFeel]

再度申し訳ありません。
＞最初の1回は選択できなくなりますが、別の項目を選択し、再度　選択なしにした時には、アクティブになってしまいます。→こちらはできました！
＞選択できない状態になっても、ページのどこか何もないところを一度クリックすると選択できなかった選択メニューが有効なってしまうようです。→こちら側が解決できずです。
申し訳ありません。

[kszk311]

コンソールで、エラーとか吐かれていないですか？
吐かれていれば教えてください。
念のため、ブラウザなど環境教えていただけると助かります。
ちなみにこちらではそのような現象は起こらないです。

[nonameFeel]

今のところ、コンソールでエラーとかは吐かれていないようです。制作中のサイトのURLを送らせていただいてもいいでしょうか。
URLの連絡はどちらからすればいいのでしょうか。teratailを使い始めたばかりで使い方が分からなくてすみません。
ブラウザの環境はFirefox、GoogleChrome、IE11、Edge、Operaで確認いたしました。

[kszk311]

わかりました、ここにつけてください。確認後すぐ連絡するので、そしたらURL消してください。

[nonameFeel]

ありがとうございます。どうぞよろしくお願いいたします。
申し訳ありません。

[kszk311]

ありがとうございます。こちらでURLメモしましたので、削除してOKです。

[nonameFeel]

ありがとうございます。削除させていただきました。

[kszk311]

「希望公演」のプルダウン表示後、何も変えなくても、閉じると編集可能となってしまう、ということでいいですか？
「選択できない状態になっても、ページのどこか何もないところを一度クリック」はよくわかりませんでした。

[nonameFeel]

＞「希望公演」のプルダウン表示後、何も変えなくても、閉じると編集可能となってしまう、ということでいいですか？
はい。こちらもありまして、私の記載ミスだとは思いますが、引き続き下の項目の「希望公演」を選択しにいくと、その上の無効だったところが有効になってしまいました。
＞「選択できない状態になっても、ページのどこか何もないところを一度クリック」はよくわかりませんでした。
こちらの方は、無効になった後、例えばページ内の白い部分をクリックすると、無効が解除されてしまいました。
説明が下手で申し訳ありません。

[kszk311]

すみませんが、原因がわかりません。
もしかしたら、script.jsに書くか、$(document).readyの中に書くことで状態が解決するかもしれませんが…。

[nonameFeel]

ご回答ありがとうございます。
script.jsに書いてみましたが、動きは同じでした。
＞$(document).readyの中に書くことで状態が解決するかもしれませんが…。
$(function() {　の前に記載することでよかったでしょうか。
どちらも動きが変わりませんでした。
またほかの方法も試してみます。ありがとうございます。

[kszk311]

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

[nonameFeel]

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

[nonameFeel]

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

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