メールフォームで disabled の設定について。

メールフォームプロという無料のメールフォームを使用しています。
プルダウンで年齢を選択させた時に、20歳以下の 15 16 17 18 19 を選択したら、
【確認画面】のバナーを無効にするような設定する。

以前こちらの質問をさせて頂き、無事に解決ができ感謝しています。

実はラジオボタンでいくつかの選択をさせて問い合わせ内容を切り替えています。
最初の質問では余計な情報だと思い記載せずにおりました。
申し訳ございません。

しかしその後に気づいたことなのですが、
ビールの注文だけでなく、問い合わせや他の選択肢を選択した際に
現状だと20歳以上を選択していなので、バナーが有効になってくれません。

問い合わせやその他の項目及びビールの注文で20歳以上を選択した時はバナー有効。
ビールの注文で20歳以下を選択したらその時だけバナーが無効になるような設定にしたいと思っています。
どのように設定してよいのか再度アドバイス頂けないでしょうか？

どうぞよろしくお願いいたします。

<!-- beerで20歳以下はバナーを無効 -->
<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>

<!-- Contact -->
<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>
<th class="title mfp">■内容をお選びください<span class="sure">*</span></th>
<td class="type mfp">
<ul class="list_radio">
<li class="inline_f mr40"><label><input type="radio" name="お問い合わせ内容" value="ホップのご購入" required="required" data-toggle="add_hop" data-toggle-hide="1"> ホップのご購入</label></li>
<li class="inline_f mr40"><label><input type="radio" name="お問い合わせ内容" value="ビールのご購入" required="required" data-toggle="add_beer" data-toggle-hide="1"> ビールのご購入</label></li>
<li><label><input type="radio" name="お問い合わせ内容" value="問い合わせのみ" required="required" data-toggle="add_txt" data-toggle-hide="1"> お問い合わせ</label></li>
</ul>
</td>
</tr>
<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="required"><span class="frmttl">名</span><input type="text" name="名" data-kana="メイ" class="width_03 width_sma02" required="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="required"><span class="frmttl">メイ</span><input type="text" name="メイ" class="width_03 width_sma02" data-charcheck="kana" required="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="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="required"></td>
</tr>
</table>
<!-- //contact_waku -->

<!-- add_hop -->
<div id="add_hop">
<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" required="required"></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>
</select>
</li>
<li><div class="wd150">住所</div><input type="text" name="住所" class="width_02 width_sma" required="required"></li>
<li><div class="wd150">建物名 部屋番号</div><input type="text" name="建物名 部屋番号" class="width_02 width_sma"></li>
</ul>
</td>
</tr>
<tr>
<th class="title heitop mfp">■注文内容<span class="sure">*</span></th>
<td class="type mfp"><textarea name="注文内容" class="width_01 width_sma" required></textarea></td>
</tr>
</table>
<dl class="hop_chu">
<dt>代金支払い方法</dt><dd>銀行振込<br>
振込先等の詳細は注文後ご連絡いたします。<br>
入金を確認後の発送となります。<br>
また、振込手数料はお客様負担となります。振込時にご確認ください。</dd>
<dt>発送について</dt><dd>ご入金確認日から6営業日以内の発送となります。</dd>
<dt>送料ならびに振込手数料</dt><dd>商品の送料ならびに銀行振込手数料についてはお客様ご負担となります。</dd>
</dl>
</div>

<!-- 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="郵便番号1" class="width_03 width_sma02" required="required"></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="都道府県1" required>
<option value="" selected="selected" class="font_slct">【選択して下さい】</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
</select>
</li>
<li><div class="wd150">住所</div><input type="text" name="住所1" class="width_02 width_sma" required="required"></li>
<li><div class="wd150">建物名 部屋番号</div><input type="text" name="建物名 部屋番号1" 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="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>
</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" required></textarea></td>
</tr>
</table>
<dl class="hop_chu">
<dt>代金支払い方法</dt><dd>銀行振込<br>
振込先等の詳細は注文後ご連絡いたします。<br>
入金を確認後の発送となります。<br>
また、振込手数料はお客様負担となります。振込時にご確認ください。</dd>
<dt>発送について</dt><dd>ご入金確認日から6営業日以内の発送となります。</dd>
<dt>送料ならびに振込手数料</dt><dd>商品の送料ならびに銀行振込手数料についてはお客様ご負担となります。</dd>
</dl>
</div>

<!-- add_txt -->
<div id="add_txt">
<p class="add_ttl">－ お問い合わせ －</p>
<table class="contact_waku">
<tr>
<th class="title heitop mfp">■お問い合わせ内容<span class="sure">*</span></th>
<td class="type mfp"><textarea name="お問い合わせ内容1" class="width_01 width_sma" required></textarea></td>
</tr>
</table>
</div>
<!-- //add -->
</div>
<!-- //mailform -->

<div class="mfp_buttons">
<button id="mfp_button_confirm" type="submit"></button>
</div>
</div>
<!-- //mfp_phase -->

</form>
</div>
<!-- //Contact -->

修正したソース

<script>
$(function() { 
    document.getElementById("mfp_button_confirm").disabled = "true";
    $('input[name="お問い合わせ内容"], #id_select').change(function(){
				
        if($('#id_select').val() < 20 && $('input[name="お問い合わせ内容"]').val() == 'ビールのご購入'){
            $("#mfp_button_confirm").prop('disabled', true); 
        } else { 
            $("#mfp_button_confirm").prop('disabled', false); 
        }
    });
}); 
</script>

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

回答1件

ベストアンサー

ビールの注文で、20歳以下を選択した時のみバナーを無効
それ以外は有効
ということですので

javascript
1if($(this).val() < 20){

の部分に『問い合わせ内容が「ビールのご購入」である』という条件を追加して、

javascript
1if($(this).val() < 20 && $('input[name="お問い合わせ内容"]').val() == 'ビールのご購入'){

この一行修正のみでいけるかと思います。

追記

問い合わせ内容の値が変わった時にも、チェックしないといけませんでした、こちらでどうでしょうか。

javascript
1	$('input[name="お問い合わせ内容"], #id_select').change(function(){
2
3		if($('#id_select').val() < 20 && $('input[name="お問い合わせ内容"]:checked').val() == 'ビールのご購入'){
4			$("#mfp_button_confirm").prop('disabled', true); 
5		} else { 
6			$("#mfp_button_confirm").prop('disabled', false); 
7		}
8	});

また追記

一致かどうかを調べれば

javascript
1 if($('#id_select').val() == '19歳以下' && $('input[name="お問い合わせ内容"]:checked').val() == 'ビールのご購入'){

投稿2018/02/26 03:49

編集2018/02/26 08:48

kszk311

総合スコア3404

Riko

2018/02/26 04:10

ありがとうございます。頂いたように変更してみましたが、上手く動きませんでした。ビールを選択→年齢を選択→何歳を選択してもバナーが有効になる。上記以外すべてバナー無効。メールフォームのソースをすべてアップしてみました。 textare name で同じ「お問い合わせ内容」があったのでそちらを「お問い合わせ内容1」に変更してみましたがダメでした。どうしたらよいでしょうか？

Riko

2018/02/26 04:10

<script> $(function() { document.getElementById("mfp_button_confirm").disabled = "true"; $("#id_select").change(function(){ if($(this).val() < 20 && $('input[name="お問い合わせ内容"]').val() == 'ビールのご購入'){ $("#mfp_button_confirm").prop('disabled', true); } else { $("#mfp_button_confirm").prop('disabled', false); } }); }); </script> <script> $(function(){ $('a img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); </script>

kszk311

2018/02/26 05:15

回答に追記しましたので、一度ご確認ください

Riko

2018/02/26 06:05

頂いた内容で更新をしてみました。今回はどれを選択してもバナーが有効になってしまいました。ページを開いた時点ではバナーが無効の状態になり、ラジオボタンでホップ・ビール・お問い合わせのどれを選択した時点でバナーが有効になりました。その後、ビールの19歳以下を選択しても有効のままでした。どうしたらよいでしょうか？  <script> $(function() { document.getElementById("mfp_button_confirm").disabled = "true"; $('input[name="お問い合わせ内容"], #id_select').change(function(){ if($(this).val() < 20 && $('input[name="お問い合わせ内容"]').val() == 'ビールのご購入'){ $("#mfp_button_confirm").prop('disabled', true); } else { $("#mfp_button_confirm").prop('disabled', false); } }); }); </script>

kszk311

2018/02/26 06:18

回答に不備がありましたので、ソースを修正しました。 input[name="お問い合わせ内容"]が変わった時に、「$(this).val() < 20」がinput[name="お問い合わせ内容"]の方になっていました。これで動きませんでしょうか。

Riko

2018/02/26 06:36

ありがとうございます。ソースを修正してみましたが、動作はさきほどのままでした。ラジオボタンをどれか選択して時点で有効になり、 19歳を選択しても有効のままでした。修正したソースを質問に追記させて頂きました。よろしくお願いいたします。

kszk311

2018/02/26 07:21

実際に動くページを見たいのですが、環境用意していただいてもよろしいでしょうか。 Codepanなど、他のサービスで結構ですので。

Riko

2018/02/26 08:14 編集

js等のファイルが多く切り出すのも大変なのでURLを記載します。 URLをご確認頂いたらご連絡頂けますでしょうか？現在作成中のサイトになります。

kszk311

2018/02/26 08:10

確認しました、ありがとうございます。「input[name="お問い合わせ内容」の値の取り方を間違えておりましたので、修正しました。

Riko

2018/02/26 08:14

ありがとうございます！！無事に動きました！！

kszk311

2018/02/26 08:17

無事に動いてよかったです。私も回答内容にミスがあり、失礼しました。

Riko

2018/02/26 08:18

いえいえ。ほんとに助かりました。ありがとうございます。

Riko

2018/02/26 08:36

たびたび申し訳ございません。選択項目が数字から文字列に変更になったことを今知りました。現状は数字を選択で20歳以下の条件ですが、それを文字列で切り分けるにはどうしたらよいのでしょうか？これは別でまた質問を立てた方が良いのでしょうか？ちなみに、選択項目は以下になりました。 19歳以下・20代・30代・40代・50代・60代以上申し訳ございません。

kszk311

2018/02/26 08:50

値が一致するかどうかだけですので、そこはHTMLの方と値を合わせておいてください。回答に追記しときましたが、このぐらいは自分でできるようになってください…。

Riko

2018/02/26 09:04

そうですね。基本的な構造を理解しないといけない状態です。。文字列を当てはめてみたのですが、上手くいかなかったのでお聞きしてしまいました。お手数をお掛けしました。ありがとうございます。

kszk311

2018/02/26 09:07

とりあえず、先ほど回答したソースでうまくいきましたか？

Riko

2018/02/26 09:09

すみません。大事なこと伝えずに。はい。問題ありませんでした。ありがとうございました。