javascript - 如果所有选择都有值，则 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
});