Question

我有一系列的debending选择框，这些选择框基于所选的选项被启用和禁用，因此例如对于comfort_name select上的某些产品仅是单个尺寸的，因此不需要在Cushion_size select上选择选项...所以我需要要做的是仅在选中所有启用的选择框后才启用提交按钮。

<div id="product_select_container" class="product_select_container">
<form name="product_select" id="product_select_form" action="retailer-gift-request/" method="post">
<select name="cushion_type" id="cushion_type" class="product_select">
  <option value="" disabled selected>Select Cushion Type</option>
  <option value="1" data-option-id="1">Sitzen </option>
  <option value="2" data-option-id="2">Schlafen</option>
  <option value="3" data-option-id="3">Reisen</option>
</select>

<select name="cushion_name" id="cushion_name" class="product_select" disabled>
  <option value="a" disabled selected data-option-id="a">Select Cushion Model</option>
  <option value="1" data-option-id="1">Comfort Cushion</option>
  <option value="2" data-option-id="1">Freilagerungssitzkissen</option>
  <option value="3" data-option-id="1">Rückenkissen</option>
  <option value="4" data-option-id="1">Sitzkissen zum Druckmanagement</option>
  <option value="5" data-option-id="1">Wedge Cushion</option>
  <option value="6" data-option-id="1">Wedge Pillow</option>
  <option value="7" data-option-id="2">Comfort Pillow</option>
  <option value="8" data-option-id="2">Dreamy Cushion</option>
  <option value="9" data-option-id="2">Kniekissen</option>
  <option value="10" data-option-id="3">Reise Nackenkissen</option>
</select>

<select name="cushion_size" id="cushion_size" class="product_select" disabled>
  <option value="a" disabled selected data-option-id="a">Select Cushion Size</option>
  <option value="2" data-option-id="2">Standard</option>
  <option value="3" data-option-id="2">Large</option>
  <option value="1" data-option-id="3">Small</option>
  <option value="2" data-option-id="3">Standard</option>
  <option value="2" data-option-id="4">Standard</option>
  <option value="3" data-option-id="4">Large</option>
</select>

<input class="product_select_submit" id="submit_btn" name="submit" type="submit" value="Submit" disabled>
</form>
</div>

var $cushion_type = $('#cushion_type'),
  $cushion_name = $('#cushion_name'),
  $cushion_size = $('#cushion_size'),
    $submit_btn = $('#submit_btn'),
  $options_a = $cushion_name.find('option'),
  $options_b = $cushion_size.find('option');

$cushion_type.on('change', function() {
  $cushion_name.prop("disabled", false).html($options_a.filter(function() {
    return $(this).data('option-id') === parseInt($cushion_type.val(), 10) || $(this).data('option-id') === "a"
  })).val('a')
  $cushion_size.val('a')
  $cushion_size.prop("disabled", true)

})

$cushion_name.on('change', function() {
  $cushion_size.html($options_b.filter(function() {
    return $(this).data('option-id') === parseInt($cushion_name.val(), 10) || $(this).data('option-id') === "a"
  }));
  $cushion_size.prop('disabled', $cushion_size.find('option').length == 1).val('a')

    if ($cushion_name.val() == "a") {
       $('#submit_btn').prop("disabled", true);
    }
    else if($cushion_name.val() !== "a" &&  $cushion_size.prop("disabled") == true) {
      $('#submit_btn').prop("disabled", false);
    }
    else if($cushion_name.val() !== "a" &&  $cushion_size.val() == "a") {
      $('#submit_btn').prop("disabled", true);
    }
  else if($cushion_name.val() !== "a" &&  $cushion_size.val() !== "a") {
      $('#submit_btn').prop("disabled", false);
    }

})

https://jsfiddle.net/arabtornado/ynb1r5pd/48/

如何根据下拉菜单选择启用按钮？

0 个答案: