基于单选按钮选择的woocommerce结帐条件字段

时间:2018-10-14 13:59:25

标签: php jquery woocommerce

在我的wordpress网站中,我需要在woocommerce结帐页面中添加一些条件字段。

我已经创建了2个字段,现在我需要根据另一个字段的选择显示一个字段。

字段名称(父字段): billing_checkbox_cf
栏位2的名称: billing_cf_in

基于“ WooCommerce conditional custom checkout fields”答案线程,这是我的代码:

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    // if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#billing_cf_in_field').hide();

            $('input#billing_checkbox_cf').change(function(){
                if (this.checked) {
                    $('#billing_cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#billing_cf_in_field > label').append(required);
                    });
                } else {
                    $('#billing_cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#billing_cf_in_field > label > .required').remove();
                    });
                }
                $('#billing_cf_in_field').val('');
                $('#billing_cf_in_field').removeClass("woocommerce-validated");
                $('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

到目前为止,如果Field1“ billing_checkbox_cf”是一个复选框,我可以使其工作。选中Field1后,我可以使Field2出现。

我想让Field1用作单选按钮(option1 | option2 | option3),并使Field2仅在用户选择为option2时显示。

但是我不是程序员,所以我无法处理单选按钮的情况。 如何修改我的代码以使其正常工作?

1 个答案:

答案 0 :(得分:0)

我设法使它起作用。我在这里发布是为了对其他人有用

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    // if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#billing_cf_in_field').hide();

            $('input[type=radio][name=billing_radiobox_cf]').change(function(){
                if (this.value === 'option2') {
                    $('#billing_cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#billing_cf_in_field > label').append(required);
                    });
                } else {
                    $('#billing_cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#billing_cf_in_field > label > .required').remove();
                    });
                }
                $('#billing_cf_in_field').val('');
                $('#billing_cf_in_field').removeClass("woocommerce-validated");
                $('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

不幸的是,验证没有完全起作用,因为在发送表单时,如果未填写billing_cf_in_field,则该字段会正确显示为红色,但错误消息在要填充的字段列表中未提及billing_cf_in_field。 我将为此打开另一个线程。