将两个函数与AND结合

Pete 发表于 Dev

皮特

如果选择了选择（脚本1）或单击了链接（脚本2），我将使用这两个脚本禁用提交按钮。

我需要使用AND相互依赖，因此都必须更改。

jQuery(document).ready(function() {
  $('button[type="submit"]').attr('disabled', true);

  $('.wc-pao-addon-field').on('change', function() {
    if ($(this).prop("selectedIndex") === 0) {
      $('.single_add_to_cart_button').prop('disabled', true);
    } else {
      $('.single_add_to_cart_button').prop('disabled', false);
    }
  });
});

jQuery(document).ready(function() {
  $('div.wc-pao-addon-laagfarve a').click(function() {
    $('.single_add_to_cart_button').prop('disabled', false);
  });
});

罗里·麦克罗森（Rory McCrossan）

要button仅在单击链接并从中选择一个选项后才启用该功能，select您可以在两个事件之后执行相同的逻辑块。该逻辑可以检查以及选择中的class放置了的内容，如下所示：aselectedIndex

$(function() {
  var $btn = $('.single_add_to_cart_button');

  var $select = $('.wc-pao-addon-field').on('change', function() {
    setSubmitState();
  });

  var $a = $('div.wc-pao-addon-laagfarve a').click(function() {
    $(this).toggleClass('active');
    setSubmitState();
  });

  function setSubmitState() {
    $btn.prop('disabled', $select.prop('selectedIndex') == 0 || !$a.hasClass('active'));
  }
});

a.active {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wc-pao-addon-laagfarve">
  <select class="wc-pao-addon-field">
    <option>Please select</option>
    <option>Foo</option>
    <option>Bar</option>
  </select>
  <a href="#">Click me</a>
</div>


<button type="submit" class="single_add_to_cart_button" disabled>Add to cart</button>

请注意，在上面的jQuery示例中，您可以将所有逻辑放在单个document.ready事件处理程序中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。