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

Question

メールフォームプロという無料のメールフォームを使用しています。
プルダウンで年齢を選択させた時に、20歳以下の 15 16 17 18 19 を選択したら、
【確認画面】のバナーを無効にするような設定をしたい。
検索をしてなんとか設定してみたのですが、思うようには動作してくれませんでした。
disabled ではバナーは非表示になってしまうのでしょうか？
できればバナーがグレーアウト用の画像等に切り替わる又は透過させて押せない状態がベストなのですが。

ちなみに、とりあえず19という固定の数字で試してみましたが、
実際は20歳以下の　15 16 17 18 19　のどれかを選択した場合という条件で設定したい。

あまりスクリプトを理解しておらず申し訳ございません。
どうしたらよいのかアドバイスを頂けないでしょうか？
よろしくお願いいたします。

<script>
$(function() { 
  document.getElementById("mfp_button_confirm").disabled = "true";
		  $("select").change(function(){
				if($(":select").val()=="19"){
      $("#mfp_button_confirm").prop('disabled', false); 
    } else { 
      $("#mfp_button_confirm").prop('disabled', true); 
    } 
  }); 
}); 
</script>

<div class="cont_cont">

<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">

<div class="mfp_phase">
<div class="mailform">
<p class="read">*は必須項目です。</p>
<!-- contact_waku -->
<table class="contact_waku">
<tr>
<input type="hidden" name="担当者名" data-unjoin="姓+ +名+（+セイ+ +メイ+）" value="" />
<th class="title mfp">■お名前<span class="sure">*</span></th>
<td class="type mfp"><span class="frmttl">姓</span><input type="text" name="姓" data-kana="セイ" class="width_03 width_sma02 mr10" required><span class="frmttl">名</span><input type="text" name="名" data-kana="メイ" class="width_03 width_sma02" required>
</td>
</tr>
<tr>
<th class="title mfp">■お名前（フリガナ）<span class="sure">*</span></th>
<td class="type mfp"><span class="frmttl">セイ</span><input type="text" name="セイ" class="width_03 width_sma02 mr10" data-charcheck="kana" required><span class="frmttl">メイ</span><input type="text" name="メイ" class="width_03 width_sma02" data-charcheck="kana" required></td>
</tr>
<tr>
<th class="title mfp">■会社名</th>
<td class="type mfp"><input type="text" name="会社名" class="width_01 width_sma"></td>
</tr>
<tr>
<th class="title mfp">■メールアドレス<span class="sure">*</span></th>
<td class="type mfp"><input type="email" data-type="email" name="email" class="width_01 width_sma" required></td>
</tr>
<tr>
<th class="title mfp">■電話番号<span class="sure">*</span></th>
<td class="type mfp"><input type="tel" data-type="tel" name="電話番号" class="width_01 width_sma"  data-min="9" required></td>
</tr>
</table>
<!-- //contact_waku -->


<!-- add_beer -->
<div id="add_beer">
<p class="add_ttl">－ ビールのご購入 －</p>
<table class="contact_waku">
<tr>
<th class="title mfp">■郵便番号<span class="sure">*</span></th>
<td class="type mfp">〒 <input type="text" name="郵便番号" class="width_03 width_sma02"></td>
</tr>
<tr>
<input type="hidden" name="ご住所" data-unjoin="都道府県+　+住所+　+建物名 部屋番号" value="" />
<th class="title mfp">■ご住所<span class="sure">*</span></th>
<td class="type mfp">
<ul class="add_ress">
<li><div class="wd150">都道府県</div>
<select name="都道府県" required>
<option value="" selected="selected" class="font_slct">【選択して下さい】</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="秋田県">秋田県</option>
<option value="宮城県">宮城県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="茨城県">茨城県</option>
<option value="埼玉県">埼玉県</option>
<option value="東京都">東京都</option>
<option value="千葉県">千葉県</option>
<option value="神奈川県">神奈川県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="静岡県">静岡県</option>
<option value="岐阜県">岐阜県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="大分県">大分県</option>
<option value="熊本県">熊本県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</li>
<li><div class="wd150">住所</div><input type="text" name="住所" class="width_02 width_sma" required></li>
<li><div class="wd150">建物名 部屋番号</div><input type="text" name="建物名 部屋番号" class="width_02 width_sma"></li>
</ul>
</td>
</tr>
<tr>
<th class="title mfp">■注文数<span class="sure">*</span></th>
<td class="type mfp style_beer01">
<ul class="list_radio">
<li class="inline_f mr40"><label><input type="radio" name="注文数" value="6本" required="required"> 6本</label></li>
<li class="inline_f mr40"><label><input type="radio" name="注文数" value="12本" required="required"> 12本</label></li>
<li><label><input type="radio" name="注文数" value="24本" required="required"> 24本</label></li>
</ul>
</td>
</tr>
<tr>
<th class="title mfp style_beer02">■年齢確認<span class="sure">*</span></th>
<td class="type mfp style_beer02">
<div class="style_beer03">
<select name="年齢確認" id="id_select" required>
<option value="" selected="selected" class="font_slct">【年齢を選択して下さい】</option>　歳です。
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
<p class="red_18 mt05 mb00">※20歳未満の方はご購入いただけませんのでご了承ください。</p>
</div>
</td>
</tr>
<tr>
<th class="title heitop mfp">■ご質問等ございましたらご記入ください。</th>
<td class="type mfp"><textarea name="ご質問等" class="width_01 width_sma"></textarea></td>
</tr>
</table>
</div>

</div>
<!-- //mailform -->

<div class="mfp_buttons">
<!-- 確認画面のバナー背景画像で設定 -->
<button id="mfp_button_confirm" type="submit"></button>
</div>
</div>
<!-- //mfp_phase -->

</form>
<!-- このスクリプトがないと動かないcgi -->
<script id="mfpjs" src="mailformpro/mailformpro.cgi" charset="UTF-8"></script>
</div>

Answer 1

	$("#id_select").change(function(){
		
		if($(this).val() < 20){
			$("#mfp_button_confirm").prop('disabled', true); 
		} else { 
			$("#mfp_button_confirm").prop('disabled', false); 
		}
	});

こちらでとりあえず動くと思います。

---

追記

jQueryを使う場合は、

$(function() { 
　//ここに処理を記述
}); 

このように囲む必要がありますので、以下のような記述となります。

<script>
$(function() { 
	document.getElementById("mfp_button_confirm").disabled = "true";
	
	$("#id_select").change(function(){

		if($(this).val() < 20){
			$("#mfp_button_confirm").prop('disabled', true); 
		} else { 
			$("#mfp_button_confirm").prop('disabled', false); 
		}
	});
}); 
</script>

また、

document.getElementById("mfp_button_confirm").disabled = "true";

と

$("#mfp_button_confirm").prop('disabled', true); 

は同じ処理になります。

---

バナーをhoverもさせずに透過させる方法

CSSで下記のように指定すればいいかと思います。

	#mfp_button_confirm:disabled ,
	#mfp_button_confirm:disabled:hover {
		opacity: 0.7;
	}

Comments

[Riko]

ありがとうございます。
以下で設定してみたのですが、うまくいきませんでした。
バナーを背景画像で設定しているからでしょうか？

<script>
$("#id_select").change(function(){

if($(this).val() < 20){
$("#mfp_button_confirm").prop('disabled', true);
} else {
$("#mfp_button_confirm").prop('disabled', false);
}
});
</script>

ちなみに bootstrap を使用しています。
そこにも disabled の設定がありました。
それが関係していることもあるのしょうか？
アドバイス頂けたらありがたいです。よろしくお願いします。

[kszk311]

機能として、送信ボタンは、押せないようになっていませんか？
うまくいかないとは、「押せてしまう」なのか、「表示切り替えができない」なのか、どちらか教えてください。
後者であれば、CSSなどの調整で解決するかと思います。

[Riko]

申し訳ありません。押せてしまいます。普通に確認画面へ遷移してしまいました。

[kszk311]

おそらくjQueryの処理自体無効になっていたかと思います。追記しましたのでご確認ください。

[Riko]

ありがとうございます！！！
ちゃんと理解しておらず、申し訳ありません。
今回はhoverで透過するけれど、クリックはできないようになりました！

もう1つお聞きしたいのですが、19歳以下を選択した場合、
バナーをhoverもさせずに透過させることは可能なのでしょうか？
たびたびで申し訳ございません。アドバイス頂けたらと思います。
よろしくお願いいたします。

[kszk311]

あとはCSS側でできますので、サンプルを追記しました。
ご確認ください。

[Riko]

ありがとうございます！！！
完璧です！！！
ほんとに助かりました！！！