Woocommerce: disable address fields when selecting a state / city

Question

Woocommerce: disable address fields when selecting a state / city

Navigation

#1 by (0 votes)

1

I'm trying to hide the address fields when you select an option in states that is not "Lima and Callao". This is what I have tried so far.

jQuery:

if($("#billing_state option:selected").val() != "Lima y Callao"){

$('#billing_address_1_field').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
});
$('#billing_address_2_field').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
});

}

if ($ ("# shipping_state option: selected"). val ()!="Lima and Callao") {

$('#shipping_address_1_field').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
});
$('#shipping_address_2_field').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
});

}

javascript jquery woocommerce

asked by Jorge 04.04.2017 в 00:28

source

1 answer

ExpandableListView always returns 0 when counting the groups How to transform the route shown in Laravel?

score 0 · Accepted Answer

Try the following code:

$("#billing_state").on("change", function (){
 if($("#billing_state option:selected").val() != "Lima y Callao"){
  $('[id^=billing_address_]').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
  });
 }else{
  $('[id^=billing_address_]').show(function(){
    $(this).addClass("validate-required");
    $(this).addClass("woocommerce-validated");
  });
 }
});

If you want this code to work for the Billing & Shipping state, make the following modifications:

$("[id$=state]").on("change", function (){
 $id=$(this).prop("id").split("_")[0];
 if($(this).find("option:selected").val() != "Lima y Callao"){
  $('[id^='+$id+'_address_]').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
  });
 }else{
  $('[id^='+$id+'_address_]').show(function(){
    $(this).addClass("validate-required");
    $(this).addClass("woocommerce-validated");
  });
 }
});

Here I leave an example that you can see how it works if you press the button Ejecutar (which is below)

$("[id$=state]").on("change", function (){
 $id=$(this).prop("id").split("_")[0];
 if($(this).find("option:selected").val() != "Lima y Callao"){
  $('[id^='+$id+'_address_]').hide(function(){
    $(this).removeClass("validate-required");
    $(this).removeClass("woocommerce-validated");
  });
 }else{
  $('[id^='+$id+'_address_]').show(function(){
    $(this).addClass("validate-required");
    $(this).addClass("woocommerce-validated");
  });
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Billing State <select name="billing_state" id="billing_state">
<option>ciudad 1</option>
<option>ciudad 2</option>
<option>ciudad 3</option>
<option>Lima y Callao</option>
</select><br>
dir1<input id="billing_address_1_field" style="display:none"><br>
dir2<input id="billing_address_2_field" style="display:none"><br>
Shipping State <select name="shipping_state" id="shipping_state">
<option>ciudad 1</option>
<option>ciudad 2</option>
<option>ciudad 3</option>
<option>Lima y Callao</option>
</select><br>
dir1<input id="shipping_address_1_field" style="display:none"><br>
dir2<input id="shipping_address_2_field" style="display:none"><br>

Wow! It's amazing how jQuery helps us develop more! writing less!.

I hope this helps you.