javascript - 如果未选择数量，则阻止选择选项；如果数量发生变化，则自动更新价格

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>

脚本代码:

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

How to block selecting the desired options if the quantity is not selected.

您不需要这样做，请参阅下面的演示

Is there a way to auto-update/live-update the price/calculations for selected type of paper option when the quantity is changed?

是的，您只需保留这些输入的值

Why in my example do I need to press double-click on the desired paper option button to re-calculate the correct price for subtotal? If I press it once the subtotal price is not changing.

这是正常的，因为您在同一个按钮上放置了两个事件“onclick”+“bind”

这就是你需要做的

    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