Question 166838 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Do I need to use .disabled in Javascript for Woocommerce?

I run Woocommerce website and want to disable a specific input on the checkout page.

Woocommerce can set shipping method by country.

I have the default country set as S,Korea, and the shipping options for Korea are displayed.

However, where if i select US, Shipping method will see shipping options according to the US.

So, Shipping method of US is not displayed by default.

And it will only be displayed if visitor select "US" as the shipping country.

Here I want to disable the input field that is only displayed when the shipping country is US.

I can hide this input field using CSS, or even get rid of it.

However, the reason I want to disable it is that the post office is temporarily paralyzed due to Corona.

I want to inform visitor that the shipping method is not only express shipping, there is also free shipping, but it is temporarily unavailable.

My website structure is as follows.

Default (S.korea)

<td data-title="shipping">
    <ul id="shipping_method" class="shipping__list woocommerce-shipping-methods>
        <li class="shipping_list_item">
            <input id="shipping_method_0_free_shipping1">
            <label class="shipping_list_label" for="shipping_method_0_free_shipping1">
        </li>
    </ul>
<td>

If choose shipping country as US

<td data-title="shipping">
    <ul id="shipping_method" class="shipping__list woocommerce-shipping-methods>
        <li class="shipping_list_item">
                <input type="radio" id="shipping_method_0_free_shipping3"> <--- want to disable this
                <label class="shipping_list_label" for="shipping_method_0_free_shipping3"> 
        </li>
        <li class="shipping_list_item">
                <input type="radio" id="shipping_method_0_flat_rate2"
                <label class="shipping_list_label" for="shipping_method_0_flat_rate2">
        </li>
    </ul>
</td>

Country selector

<span class="woocommerce-input-wrapper">
    <select name="billing_country">
        <option value>Select Country</option>
        <option value="US">US</option>
        <option value="KR" selected="selected">Korea</option>
        <option value="CA">Canada</option>
    </select>

And I tried the javascript below.

<script>
     const target = document.querySelector('#shipping_method > li:nth-child(1)');
target.disabled = true;
</script>


<script>
     const target = document.querySelector('#shipping_method_0_free_shipping3');
target.disabled = true;
</script>

but these code not work.

I’d like to get some advice on which part I should check.

Tags:

2

Answers


  1. 0

    You can try to do it with css styling, place your inputs inside a div and give the div a disabled class, all you have to do is to assign the disabled class to the div via java script

    div.disabled {
  opacity: 0.6;
  pointer-events: none;
}


html 
<div id="#mydiv"> <input name="input-1"/></div>

//jquery code 
$("#mydiv").addClass("disabled"); 
//javascript code
document.getElementById("#myDiv").classList.add('disabled');
    Login or Signup to reply.
  2. 0

    Try this (Updated Answer)

    <input id="name" type="text"/>

const myInput = document.getElementById("name")
const inputDisabled = true

if (inputDisabled) {
    myInput.setAttribute("disabled", "disabled");
} else {
    myInput.removeAttribute("disabled");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search