我创建了一个带有4个单选按钮的选择字段和2个隐藏的下拉列表，只有在选中第一个或第二个单选按钮时才会显示 .

<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field">
<label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr>

</label>
<br>
<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</span>

<br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span>

<br>
<input type="radio" name="billing_piegadatajs" value="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span>

<br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>

<br>
</p>
<p class="form-row form-row-wide validate-required hidepost" id="billing_pastastacija_field">
<label for="billing_pastastacija" class="">Pasta Stacijas adrese <abbr class="required" title="vajadzīgs">*</abbr>

</label>
<select name="billing_pastastacija" id="billing_pastastacija" class="select" allow_null="1" presentation="select" display="">
    <option value="0">- Make a choice -</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
</select>
</p>
<p class="form-row form-row-wide validate-required hidepost" id="billing_pakomati_field">
<label for="billing_pakomati" class="">Post 24 pakomātu adrese <abbr class="required" title="vajadzīgs">*</abbr>

</label>
<select name="billing_pakomati" id="billing_pakomati" class="select" allow_null="1" presentation="select" display="">
    <option value="0">- Make a choice -</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
</select>
</p>

我添加了这个CSS

.hidepost {
display: none;
}

这个jquery根据选择的无线电显示/隐藏下拉列表 .

jQuery(document).ready(function ($) {
$("input[type=\"radio\"]").click(function () {
    if ($(this).attr("value") == "Pasta Stacija") {
        $(".hidepost").hide();
        $("#billing_pastastacija_field").show();
    }
    if ($(this).attr("value") == "Post24") {
        $(".hidepost").hide();
        $("#billing_pakomati_field").show();
    }
    if ($(this).attr("value") == "Kurjerdienests") {
        $(".hidepost").hide();
        $(".blue").show();
    }
    if ($(this).attr("value") == "Saņemt uz vietas") {
        $(".hidepost").hide();
        $(".blue").show();
    }
});
});

你也可以在jsfiddle上查看

我想要完成的是：

  • 当选中值为"Pasta Stacija"的单选按钮1时，id = "billing_pakomati_field"的字段为UNSET为必填字段 .

  • 当选中值为"Post24"的单选按钮2时，id = "billing_pastastacija_field"的字段为UNSET为必填字段 .

  • 当选中值为"Kurjerdienests"且值= "Saņemt uz vietas"的单选按钮3和4时，则两个BOTH字段都是UNSET

This is in Wordpress / wooCommerce.

甚至可以使用jquery吗？要在wooCommerce中取消设置必填字段？我知道取消设置字段的唯一方法是使用自定义函数，例如：

unset($fields['billing']['billing_state']);

附：这些字段是使用创建自定义字段的插件创建的，不知道这是否很重要 .

javascript jquery wordpress