Question

如果选择了选择（脚本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);
  });
});

Answer 1

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

$(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事件处理程序中。

Answer 2

您可以通过在每个事件期间向主体添加一个类来实现。然后，您可以在一个事件中检查该类，以验证另一个事件是否已被触发。

jQuery(document).ready(function() {
  $('button[type="submit"]').attr('disabled', true);

  $('.wc-pao-addon-field').on('change', function() {
      if ($(this).prop("selectedIndex") > 0) {
        $('body').addClass('select-change');
        if ($('body').hasClass('button-clicked') {
            $('.single_add_to_cart_button').prop('disabled', false);
          }
        }
      });

    $('div.wc-pao-addon-laagfarve a').click(function() {
        $('body').addClass('button-clicked');
        if ($('body').hasClass('select-change') {
            $('.single_add_to_cart_button').prop('disabled', false);
          }
        });
    });
});

将两个函数与AND结合

2 个答案: