如果所有選擇都有值，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顯示按鈕

回答

相關問題