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

Question

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

我正在添加一个类“disableit”。我的代码几乎可以工作了：当用户在文本框中键入任何内容时出现按钮，但当文本框再次变为空时，类“disableit”不再添加。

我想要的是，如果用户单击复选框，添加到购物车按钮将不起作用，直到用户将信息填写到文本框中并且如果用户取消选中复选框，文本框将隐藏。

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');
  }
});

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)