在我的 WooCommerce 结帐表单中,我有一个额外的复选框,选中时会显示一个新的输入。 我希望在选中复选框时需要此输入。 我可以在不直接干扰表单代码的情况下使用 JavaScript 以某种方式解决它吗?
我附上表格的截图: screenshot1, screenshot2。
也许您对如何正确地进行操作有其他想法?
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>
答案 0 :(得分:0)
玩转:
$('.check').change(function(){
var is_hidden = $('input[type="text"]').prop('hidden');
var make_hidden = true;
if (is_hidden === true){
make_hidden = false;
}
$('input[type="text"]').prop('hidden', make_hidden);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"><label>Check</label>
<input type="text" hidden>
答案 1 :(得分:0)
我用下面的脚本解决了我的问题
jQuery(function ($) {
$('#billing_invoice_ask').change(function(){
if($(this).is(":checked")) {
$('#billing_vat_number_field').addClass('validate-required');
} else {
$('#billing_vat_number_field').removeClass('validate-required');
}
});
});