需要建议应用.在Javascript中禁用

Question

我运行Wooccommerce网站，希望禁用结账页面上的特定输入。

Woocommerce可以按国家设置运输方式。

我将默认国家/地区设置为S，Korea，并显示Korea的运输选项。

然而，如果我选择美国，运输方式将根据美国看到运输选项。

因此，默认情况下不显示美国的运输方式。

并且只有当访问者选择"；US"；作为装运国。

在这里，我想禁用只有当运输国家是美国时才会显示的输入字段。

我可以使用CSS隐藏这个输入字段，甚至可以去掉它

然而，我想禁用它的原因是，由于科罗纳，邮局暂时瘫痪。

我想通知访客，运输方式不仅是快递，还有免费运输，但暂时不可用。

我的网站结构如下。

违约(韩国(

<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>

如果选择运输国家作为美国

<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>

国家/地区选择器

<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>

我尝试了下面的javascript。

<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>

但这些代码不起作用。

我想听听我应该检查哪一部分的建议。

Answer 1

试试这个(更新的答案(

<input id="name" type="text"/>
const myInput = document.getElementById("name")
const inputDisabled = true
if (inputDisabled) {
myInput.setAttribute("disabled", "disabled");
} else {
myInput.removeAttribute("disabled");
}

Answer 2

您可以尝试使用css样式，将输入放在div中，并为div指定一个禁用的类，您所要做的就是通过java脚本将禁用的类分配给div

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');