jQuery顯示按鈕（如果所有選擇均具有值）

Question

我有一系列選擇選項，客戶可以用來更改產品選項以適應他們的需求。 這將改變價格，這有效。 但是，我無法工作的一點是我希望隱藏購買按鈕，直到從每個選擇中至少選擇了一個選項。

目前可以使用，但是如果只有一個選項具有選擇，則會顯示“購買”按鈕。 如何確保僅在所有選擇都選擇了選項的情況下才會顯示？

我幾乎無法控制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('£' + (optionsTotal + itemPrice).toFixed(2));

      }).change();

      $(".product__price").html('£' + (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

Answer 1

您可以使用：

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
});

Answer 2

嘗試一下：

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();
  }
});