文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery如果textbox为空，则隐藏按钮；如果textbox有值，则显示

问jQuery如果textbox为空，则隐藏按钮；如果textbox有值，则显示
EN

Stack Overflow用户

提问于 2017-12-02 17:54:47

回答 1查看 832关注 0票数 0

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

我正在添加一个类"disableit“。我的代码几乎可以工作了:当用户在textbox中输入任何内容时，按钮就会出现，但当textbox再次变为空时，类"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');
  }
});

javascript

jquery

wordpress

wordpress-theming

回答 1

Stack Overflow用户

发布于 2017-12-02 19:00:27

使用两个事件处理程序，文本字段使用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)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47606605

复制

相似问题

问jQuery如果textbox为空，则隐藏按钮；如果textbox有值，则显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery如果textbox为空，则隐藏按钮；如果textbox有值，则显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery如果textbox为空，则隐藏按钮；如果textbox有值，则显示
EN