前提・実現したいこと
メールフォームで商品の予約フォームを作っています。
サイズ違いで 2種類の価格があり、
商品の色ごとにそれぞれ注文できるフォームです。
色が違っても価格はサイズ共通です。
例)
色:赤 サイズ:S / L 数量:1〜4
色:青 サイズ:S / L 数量:1〜4
色:黄 サイズ:S / L 数量:1〜4
色:緑 サイズ:S / L 数量:1〜4
色:紫 サイズ:S / L 数量:1〜4
色:黒 サイズ:S / L 数量:1〜4
色はチェックボックスで選び、
サイズ、数量は、セレクトボックスで選ぶようにしています。
最終的に下記のように表示させたいです。
Sサイズ:合計▲▲枚 × 600円 = ▲,▲▲▲円
Lサイズ:合計▲▲枚 × 900円 = ▲,▲▲▲円
送料:500円
合計 ▲,▲▲▲円
発生している問題・エラーメッセージ
商品の合計数と合計金額をサイズごとに集計して表示したいのですが、
Sサイズ / Lサイズ の金額の振り分けができません。
該当のソースコード
html
1<label class="color"> 2 <input type="checkbox" name="color" value="color01 on" onclick="connecttext('size01',this.checked);"> 3 赤 4</label> 5<select class="parent" id="size01" name="size01" disabled required> 6 <option value="" class="msg" disabled selected>サイズを選択</option> 7 <option value="S">S:600円</option> 8 <option value="L">L:900円</option> 9</select> 10<select class="children" id="number01" name="number01" disabled required> 11 <option value="0" class="msg" selected>0</option> 12 <option value="1" data-val="S">1</option> 13 <option value="2" data-val="S">2</option> 14 <option value="3" data-val="S">3</option> 15 <option value="4" data-val="S">4</option> 16 <option value="1" data-val="L">1</option> 17 <option value="2" data-val="L">2</option> 18 <option value="3" data-val="L">3</option> 19 <option value="4" data-val="L">4</option> 20 </select> 21<label class="color"> 22 <input type="checkbox" name="color" value="color01 on" onclick="connecttext('size02',this.checked);"> 23 青 24</label> 25<select class="parent" id="size02" name="size02" disabled required> 26 <option value="" class="msg" disabled selected>サイズを選択</option> 27 <option value="S">S:600円</option> 28 <option value="L">L:900円</option> 29</select> 30<select class="children" id="number02" name="number02" disabled required> 31 <option value="0" class="msg" selected>0</option> 32 <option value="1" data-val="S">1</option> 33 <option value="2" data-val="S">2</option> 34 <option value="3" data-val="S">3</option> 35 <option value="4" data-val="S">4</option> 36 <option value="1" data-val="L">1</option> 37 <option value="2" data-val="L">2</option> 38 <option value="3" data-val="L">3</option> 39 <option value="4" data-val="L">4</option> 40</select> 41(残り4種類同様です)
js
1$(function() { 2 //セレクトボックスが切り替わったら発動 3 $('select#number').change(function() { 4 5 //選択したvalue値を変数に格納 6 var val = $(this).val(); 7 8 //選択したvalue値をp要素に出力 9 $('p#fee').text(val); 10 }); 11}); 12$(function() { 13 var $children = $('.children'); 14 var original = $children.html(); 15 16 $('.parent').change(function() { 17 var val1 = $(this).val(); 18 19 $children.html(original).find('option').each(function() { 20 var val2 = $(this).data('val'); 21 if (val1 != val2) { 22 $(this).not('optgroup,.msg').remove(); 23 } 24 }); 25 26 if ($(this).val() === '') { 27 $children.attr('disabled', 'disabled'); 28 } else { 29 $children.removeAttr('disabled'); 30 } 31 32 }); 33}); 34function connecttext( textid, ischecked ) { 35 // チェック状態に合わせて有効・無効を切り替える 36 document.getElementById(textid).disabled = !ischecked; 37} 38$("input[type=checkbox]").click(function(){ 39 var $count = $("input[type=checkbox]:checked").length; 40 var $not = $('input[type=checkbox]').not(':checked') 41 42 //チェックが3つ付いたら、チェックされてないチェックボックスにdisabledを加える 43 if($count >= 10) { 44 $not.attr("disabled",true); 45 }else{ 46 //3つ以下ならisabledを外す 47 $not.attr("disabled",false); 48 } 49});
試したこと
js
1$(function(){ 2 var value = 900; 3 var maxNum = 4; 4 var tagInput = $('#number01'); 5 var tagOutput = $('#jsPrice'); 6 tagInput.on('change', function() { 7 var str = $(this).val(); 8 9 if(num == 0) { 10 num = ''; 11 } else if (num > maxNum) { 12 num = maxNum; 13 } 14 $(this).val(num); 15 if(num != 0) { 16 var price = num * value; 17 tagOutput.val(price); 18 } 19 }); 20});
補足情報
色々と調べたのですが、
合計するだけならなんとか出来たのですが、
2種類の価格を振り分けて表示することがどうにもできません。
どなたか、ご教示のほど、お願いいたします。
回答4件
あなたの回答
tips
プレビュー