如果所有选择都有值，jQuery显示按钮

我有一系列选择选项，客户端可以使用这些选项来更改产品选项以满足其需求。这将改变价格，这是有效的。然而，我无法工作的一点是，我希望隐藏购买按钮，直到每个选择至少有一个选项被选中。如果所有选择都有值，jQuery显示按钮

目前它的工作原理是，只要其中一个选项有选择，就会显示购买按钮。我怎样才能确保它只出现在所有的选择都选择了一个选项？

我已经过HTML无法控制，所以与我有什么

HTML工作：

<div class="site-wrapper"> 
    <div class="product"> 
    <div class="product__price"> 
     £20.00 
    </div> 

    <div id="final_item_price" class="item_price hidden">20.00</div> 

    <div class="product__options"> 
     <h3>Colour</h3> 
     <select name="product option 1" id="select1" class="cartDdlOptions"> 
     <option value="">Please select</option> 
     <option value="5.0000~U">Blue</option> 
     <option value="5.0000~U">Orange</option> 
     </select> 

     <h3>Size</h3> 
     <select name="product option 2" id="select2" class="cartDdlOptions"> 
     <option value="">Please select</option> 
     <option value="5.0000~U">Small</option> 
     <option value="5.0000~U">Large</option> 
     </select> 
    </div> 

    <div class="buy__btn"> 
     <a href="#" class="btn">Buy Me</a> 
    </div> 
    </div> 
</div>

的jQuery：

$(document).ready(function(){ 

    var optionsTotal = null, 
    itemPrice = parseFloat($(".item_price").text()); 

     $(".cartDdlOptions").on('change', function() { 

      optionsTotal = new Number(0); 
      $.map($(".cartDdlOptions").find('option:selected'), function (el, i) { 
       var v = new Number($(el).val(function(i, v){return v.replace("~U","");}).val()); 
       optionsTotal += v; 
      }); 

      $(".product__price").html('&pound;' + (optionsTotal + itemPrice).toFixed(2)); 

     }).change(); 

     $(".product__price").html('&pound;' + (optionsTotal + itemPrice).toFixed(2)); 

    //////////////////////////////////////////////////////// 
    //start of second part that doesn't work 
    //////////////////////////////////////////////////////// 

    $(".buy__btn").hide(); 

    var thisvalue = $(this).find("option:selected").val(); 

     $(".cartDdlOptions").change(function() { 

     if ($(thisvalue) == ""){ 
      $(".detailProductBuyButton").hide(); 
     } 

     else{  
      $(".buy__btn").show(); 
     } 
    }); 

    });

工作例如：http://codepen.io/vdecree/pen/nxqts

来源

2014-09-04 Doidgey

您可以使用：

var $select = $(".product__options select"); //Cache the select 

$select.on('change', function() { 
    var valid = true; //Flag 
    $select.each(function() { 
     return valid = !!this.value //Assign the flag a bolean is valid or not 
    }); 

    $(".buy__btn").toggle(valid); //Display/hide 
});

来源

2014-09-04 13:38:44

+1尼斯和整洁的答案 – 2014-09-04 13:40:19

辉煌，谢谢:) – Doidgey 2014-09-04 13:45:24

卡尔，如果我想绑在别的东西上可见或隐藏在买btn的切换，我该怎么做？基本上我有东西需要隐藏，当买btn可见 – Doidgey 2014-09-04 14:15:20

试试这个：

var $options = $(".product_options select"); 

$options.on('change', function() { 
    var selectedCount = 0; 
    $options.each(function() { 
    if ($(this).val()) { 
     selectedCount ++; 
    } 
    }); 

    // All select fields have been selected. 
    if (selectedCount === $options.length) { 
    $(".buy__btn").show(); 
    } else { 
    $(".buy__btn").hide(); 
    } 
});

来源

2014-09-04 13:35:51

赞赏帮助！ – Doidgey 2014-09-04 13:48:31

如果所有选择都有值，jQuery显示按钮

回答

相关问题