Question

我想在选中复选框并且文本框为空时禁用添加到购物车按钮。如果用户单击复选框并在文本框中键入任何内容，则会出现按钮。否则它将被禁用。

我正在添加一个类＆＃34; disableit＆＃34;。我的代码几乎正常工作：当用户在文本框中输入任何内容按钮时，会出现，但是当文本框再次出现空类时，＃34;禁用＆＃34;不再添加。

我想要的是，如果用户点击复选框添加到购物车按钮将无法工作，直到用户将信息填入文本框，如果用户取消选中复选框文本框将隐藏。

＆＃13;

jQuery('.single-product .summary button.single_add_to_cart_button').addClass('disableit');
jQuery(".custom_enter-the-domain-name,.custom_hosting-username").on('propertychange change keyup paste input', function() {
  if ((jQuery("input[name='addon[domain]']")).is(':checked') && (jQuery('.custom_enter-the-domain-name').length > 0)) {
    jQuery('.single-product .summary button.single_add_to_cart_button').removeClass('disableit');
  } else if ((jQuery("input[name='addon[domain]']")).is(':checked') && (jQuery('.custom_enter-the-domain-name').val() == '')) {
    jQuery('.single-product .summary button.single_add_to_cart_button').addClass('disableit');
  }
});

＆＃13;

Answer 1

使用2个事件处理程序，文本字段为input，复选框为change。以下代码将完成您想要的行为。

var addToCart = jQuery('.single-product .summary button.single_add_to_cart_button')
var checkBox = jQuery("input[name='addon[domain]']")
var textField = jQuery('.custom_enter-the-domain-name')

function toggleButton() {
  if(checkBox.is(':checked')) {
    if (textField.val() === '') {
      addToCart.addClass('disableit')
    } else {
      addToCart.removeClass('disableit')
    } 
  } else {
    addToCart.addClass('disableit')      
  }
}

toggleButton()
textField.on('input', toggleButton)
checkBox.on('change', toggleButton)

如果文本框为空，则jQuery隐藏按钮，如果文本框具有值，则显示

1 个答案: