电商结账页：如何检查并更新关联配送与支付单选按钮状态？

问题背景 #

切换配送方式时，部分不兼容的支付方式会被从DOM中移除，但如果之前已选中该支付方式，结算引擎仍会保留其选中状态，导致无法正确计算当前可用支付方式的额外费用。

解决方案代码 #

jQuery(function($) {
    $('form.checkout').on('change', 'input.shipping_method', function() {
        // 获取当前选中的支付方式值
        const selectedPaymentVal = $('input[name=payment_method]:checked').val();
        
        // 通过name和value检查该支付方式是否仍存在于DOM中
        const paymentExists = $('input[name="payment_method"][value="' + selectedPaymentVal + '"]').length > 0;
        
        if (!paymentExists) {
            // 原支付方式已被移除，选中第一个可用的支付方式
            const firstAvailablePayment = $('input[name="payment_method"]:first');
            if (firstAvailablePayment.length) {
                firstAvailablePayment.prop('checked', true);
                // 触发结算更新事件，让引擎同步状态
                $(document.body).trigger('update_checkout');
            }
        } else {
            // 原支付方式仍可用，正常触发结算更新
            $(document.body).trigger('update_checkout');
        }
    });
});

代码逻辑说明 #

• 获取选中支付方式：通过input[name=payment_method]:checked拿到当前选中的支付方式值，全程不依赖ID。
• 验证支付方式存在性：用属性选择器input[name="payment_method"][value="xxx"]检查该支付方式是否还在DOM中，完全符合“通过name和value而非id检查”的要求。
• 切换到可用支付方式：如果原支付方式已被移除，直接选中第一个可用选项，再触发update_checkout事件，确保结算引擎更新状态，费用计算正常。
• 正常场景处理：原支付方式仍存在时，直接触发结算更新即可。

可选优化：指定优先选中特定支付方式 #

如果需要优先选中某特定支付方式（比如示例中的COD），可以把选中逻辑替换为：

// 优先选中COD（假设其value为"cod"）
const codPayment = $('input[name="payment_method"][value="cod"]');
if (codPayment.length) {
    codPayment.prop('checked', true);
} else {
    // 若COD不存在，再选第一个可用的支付方式
    const firstAvailablePayment = $('input[name="payment_method"]:first');
    if (firstAvailablePayment.length) {
        firstAvailablePayment.prop('checked', true);
    }
}

内容的提问来源于stack exchange，提问作者Faye D.