如果数量未选择，块将选择选项，如果数量已更改，则自动更新价格

Question

想要获得本示例中的选项以便正常工作，但我需要一些帮助/提示。

1. 如何在未选择数量时阻止选择所需的选项。

2. 当数量发生变化时，是否有办法自动更新/实时更新所选纸张类型选项的价格/计算？

3. 为什么在我的示例中，是否需要按下所需的纸张选项按钮才能重新计算小计的正确价格？如果我在小计价格没有变化时按下它。

您可以检查演示，你会明白我的意思。

演示：http://jsfiddle.net/c7b5f5t9/

我是新来的jQuery。先谢谢你。

HTML代码：

<h3>Select Quantity:</h3> 
    <select name="quantity-select" id="quantity" onchange="subtotal()"> 
    <option data-price="0.00" value="0" selected>Select Quantity</option> 
    <option data-price="1.49" value="55" >55 Flyers for 81.95$/1.49$ each</option> 
    <option data-price="1.39" value="66" >66 Flyers for 91.74$/1.29$ each</option> 
    <option data-price="1.29" value="77" >77 Flyers for 99.33$/1.09$ each</option> 
    <option data-price="1.19" value="88" >88 Flyers for 104.72$/0.89$ each</option> 
    </select> 

<h3>Select Paper:</h3> 
    <ul class="paper"> 
    <li data-price="0.00" onclick="subtotal()">Standard Paper<br>(+0.00$)</li> 
    <li data-price="0.15" onclick="subtotal()">Double Thick Paper<br>(+0.15$/piece)</li> 
    <li data-price="0.25" onclick="subtotal()">Triple Thick Paper<br>(+0.25$/piece)</li> 
</ul> 

<h3>Extra Options:</h3> 
    <input name="box1" value="nolaminating" id="nolaminating" data-price="0.00" type="radio" onchange="subtotal()">No Laminating (+0.00$)<br> 
    <input name="box1" value="matte" id="matte" data-price="50.00" type="radio" onchange="subtotal()">Matte Laminating (+50.00$)<br> 
    <input name="box1" value="gloss" id="gloss" data-price="75.00" type="radio" onchange="subtotal()">Gloss Laminating (+75.00$)<br> 


<div class="prices"> 

    <h3>Flyers = $<span class="sum" id="flyers">0.00</span></h3> 
    <h3>Paper = $<span class="sum" id="papertype">0.00</span></h3> 
    <h3>Extra Options = $<span class="sum" id="extraoptions">0.00</span></h3> 

</div> 

<h3>Subtotal = $<span id="subtotal">0.00</span></h3> 

Script代码：

var flyersprice = '0.00'; 
var paperoptions = '0.00'; 
var extraoptions = '0.00'; 

function subtotal(){ 

    var price = $("#quantity option:selected").attr("data-price"); 

    flyersprice = $("#quantity option:selected").val() * price; 

    $("#flyers").text(flyersprice.toFixed(2)); 

    $(".paper li").click(function(){ 
     var paperoptions = $(this).data("price") * $("#quantity option:selected").val(); 
     $("#papertype").text(paperoptions.toFixed(2)); 
    }); 
    $('#papertype').change(subtotal); 

    $("input[type=radio]").change(function(){ 
     var extraoptions = $(this).data("price"); 
     $("#extraoptions").text(extraoptions); 
    }); 
    $('input').change(subtotal); 

    var sum = 0; 
    $('.sum').each(function() { 
     sum += +$(this).text();  
    }); 
    $("#subtotal").text(sum.toFixed(2)); 
} 

Answer 1

如果未选择的数量如何阻止选择所需的选项。

你不需要做，看下面的演示

是否有办法来自动更新/实时更新的价格/纸选项的选择的类型计算时的数量是改变了吗？

是的，你只是为了让这些输入值

为什么在我的例子，我需要按双击所需的纸张选项按钮，重新计算出正确的价格小计？如果我在小计价格没有变化时按下它。

这是正常的，因为你把两个事件在同一按钮上“点击” +“绑定”

这就是你需要做的

var selectedPaper = null;  
function subtotal(){ 
     var price= $("#quantity option:selected").attr("data-price"); 
     if($("#quantity").val() == 0){ 
      $("#papertype").text("0.00"); 
      $("#extraoptions").text("0.00"); 
      $("input[type=radio]").attr('checked',false) 
      selectedPaper = null; 
     } 
     flyersprice = $("#quantity").val() * price; 
     $("#flyers").text(flyersprice.toFixed(2)); 

     var sum = 0; 
     $('.sum').each(function() { 
      sum += +$(this).text();  
     }); 
     $("#subtotal").text(sum.toFixed(2)); 
    } 
$(function(){ 
    $("#quantity").on('change',function(){ 
     if(selectedPaper){ 
      $(".paper li").eq(selectedPaper).trigger('click'); 
     } 
     subtotal(); 
    }); 
    $(".paper li").on('click',function(){ 
     if($("#quantity").val() != 0){ 
      var paperoptions = $(this).data("price") * $("#quantity").val(); 
      $("#papertype").text(paperoptions.toFixed(2)); 
      selectedPaper = $(".paper li").index(this); 
      subtotal(); 
     }else{ 
      $("#papertype").text("0.00"); 
      selectedPaper = null; 
     } 
    }); 
    $("input[type=radio]").on('change',function(){ 
     if($("#quantity").val() != 0){ 
      var extraoptions = $(this).data("price"); 
      $("#extraoptions").text(extraoptions); 
      subtotal(); 
     }else{ 
      $("#extraoptions").text("0.00"); 
      selectedPaper = null; 
     } 
    }); 
}) 

这是一个DEMO