javascript - 当两个数据属性都不为空时，将按钮从禁用更改为启用

Question

当两个数据属性都不为空时，我试图将按钮从禁用更改为启用。

我没有收到任何错误，但每次我填写数据属性时都不会更改其禁​​用/启用属性。

我已经试过了，但没有任何反应，我的浏览器控制台没有打印出任何东西。

<select class="form-control os" name="os">
  <option disabled selected>Please choose...</option>
  <option>Ubuntu Server 18.04</option>
  <option>Ubuntu Server 16.04</option>
  <option>Ubuntu Server 14.04</option>
</select>

<select class="form-control location" name="location">
  <option value="" disabled selected>Please choose...</option>
  <option value="Sydney">Sydney</option>
  <option value="Tokyo">Tokyo</option>
  <option value="Sao Paulo">São Paulo</option>
</select>

<button class="btn btn-primary btn-lg float-right btn-buynow" data-shoppy-product="ewAfime" data-shoppy-os="" data-shoppy-location="" disabled>Buy now</button>

$(document).ready(function(){
    $("select.location").change(function(){
        var selectedLocation = $(this).children("option:selected").val();
        $('.btn-buynow').attr('data-shoppy-location', selectedLocation);
    });
    $('select.os').change(function() {
        var selectedOS = $(this).children("option:selected").val();
        $('.btn-buynow').attr('data-shoppy-os', selectedOS);
    });

    var $buynow = $('.btn-buynow');
    if (typeof $buynow.data('shoppy-os') !== 'undefined' && typeof $buynow.data('shoppy-location') !== 'undefined') {
      if($buynow.attr('disabled')) $buynow.removeAttr('disabled');
      else $buynow.attr('disabled', 'disabled');
    }
});

Answer 1

尝试跟随

• 在使用 .data() 访问 data 属性时，从参数中去除 data-
• 要禁用一个按钮，使用.attr('disabled', 'disabled');

var $buynow = $('.btn-buynow');
if ($buynow.data('shoppy-os') && $buynow.data('shoppy-location')) {
  if($buynow.attr('disabled')) $buynow.removeAttr('disabled');
  else $buynow.attr('disabled', 'disabled');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn-buynow" data-shoppy-os="a" data-shoppy-location="b" disabled>Button</button>