jQuery not hiding labels and elements-CodePudding

I'm tying to use using jQuery in Woocommerce to hide form fields in my billing field based on a select box value, the jQuery does hide the element nor the labels: My code for this is:


jQuery(document).ready(function(){
    // Your code in here
  jQuery(document).on('input','billing_condition', function() {
 
      mySecFunc();
})
function mySecFunc() {
    // your function code
if(jQuery('#billing_condition').val() == 'house'){
    console.log('before');
    
    jQuery('#billing_complex_name').hide();
    jQuery('label[for="billing_complex_name"]').hide();
    
    jQuery('#billing_complex_address').hide();
    jQuery('label[for="billing_complex_address"]').hide();
    
    jQuery('#billing_complex_address_inside').hide();
    jQuery('label[for="billing_complex_address_inside]').hide();

    console.log('after');
    
}else{
    console.log('before');
    
    jQuery('label[for="billing_address_1"]').hide();
    jQuery('#billing_address_1').hide();
    
    jQuery('label[for="billing_complex_name"]').show();
    jQuery('#billing_complex_complex_name').show();
    jQuery('#billing_complex_address').show();
    jQuery('label[for="billing_complex_address"]').show();
    
    jQuery('#billing_complex_address_inside').show();
    jQuery('label[for="billing_complex_address_inside"]').show();

    console.log('after');
    
}
}})```

The elements were going prior however are not at current nor are the labels.

CodePudding user response：

Probably try keyup event on your input, I have managed to solve your issue by that. DEMO

HTML

<label for="#billing_condition">Label</label>
<input type="text" id="billing_condition"/>

JAVASCRIPT

$(document).ready(function() {
  var input = $("#billing_condition");
  input.keyup(function() {
    if (input.val() == "abc") {
      $('label[for="#billing_condition"]').hide();
    } else {
        $('label[for="#billing_condition"]').show();
    }
  });
});