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

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

我要添加一个类” 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');
  }
});

#1

使用2个事件处理程序, 在文本字段中输入, 然后在复选框中进行更改。下面的代码将完成你想要的行为。

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)