商品注文メールフォームを作成しております。
・商品A、B、C、Dにつき、それぞれのサイズをselectで選択
・受取日はjquery-uiのdatepickerで入力
・商品Aのみサイズを選択した場合は1日後から受取可
・商品B、C、Dいずれかを選択した場合は2日後から受取可
・例えば
商品A:サイズS、
商品C:サイズM
商品D:サイズM
であれば2日後から受取可
となるよう、
・商品選択箇所、
・日付入力箇所、
・商品選択に応じた受取可能日変更の記述
を以下のように作成しました。
html
1<!--商品選択箇所--> 2<select name="商品A"> 3<option value="">サイズ選択</option> 4<option value="S">S</option> 5<option value="M">M</option> 6</select> 7<select name="商品B" class="twodays"> 8<option value="">サイズ選択</option> 9<option value="S">S</option> 10<option value="M">M</option> 11</select> 12<select name="商品C" class="twodays"> 13<option value="">サイズ選択</option> 14<option value="S">S</option> 15<option value="M">M</option> 16</select> 17<select name="商品D" class="twodays"> 18<option value="">サイズ選択</option> 19<option value="S">S</option> 20<option value="M">M</option> 21</select> 22 23<!--日付入力箇所--> 24<input type="text" name="受取日" class="form-control date dateFrom hiduke" /> 25
javascript
1<!--受取可能日変更の記述--> 2<script> 3 $('select.twodays').change(function() { 4 var selected = []; 5 $('select.twodays').each(function(){ 6 selected.push($(this).val()); 7 }); 8 9 if( selected !==["", "", ""] ){ 10 $( ".hiduke" ).datepicker( "option", "minDate", "+2d" ); 11 } else { 12 $( ".hiduke" ).datepicker( "option", "minDate", "+1d" ); 13 } 14 }); 15</script>
この場合、
datepickerの挙動は
・初期値→1日後から受取可
・商品Aのサイズを選択→初期値のまま
・商品BCDいずれかのサイズを選択→2日後から受取可
となりましたが
商品BCDいずれかのサイズを選択し、
受取日が2日後に切り替わった後で
商品BCDのサイズ選択を「サイズ選択」
つまり空欄に切り替えても
datepickerの選択可能日が初期値に戻りません。
条件指定の間違いかと思いますが、
ご指摘ご教授いただけますようお願いします。
回答1件
あなたの回答
tips
プレビュー