jQuery点击设置卡片默认状态及按钮禁用功能问题求解

原有代码的问题 #

• 遍历.bgCreditcard的逻辑错误：循环中每次都给当前遍历到的卡片加active类，执行完后所有卡片都会带上active类，完全违背单选效果
• 没有做全局状态重置：切换默认卡时没有移除旧卡片的选中类，也没有恢复旧按钮的可点击状态
• 类名和需求不匹配：需求要求选中卡片带default类，原有代码只操作了active类

核心实现逻辑 #

点击按钮时按顺序执行三步操作即可避免多卡同时激活、按钮状态异常的问题：

• 先重置所有卡片、按钮的状态：移除所有卡片的选中类，把所有按钮恢复为可点击、文本为「Set as Default」的初始状态
• 定位当前点击按钮对应的父级.bgCreditcard元素，为其添加选中类
• 把当前点击的按钮设为禁用状态，同步修改按钮文本和样式类

完整代码 #

直接替换原有JS代码即可，不需要修改HTML结构：

$('.bg-default').on('click', function() {
    // 全局重置所有卡片和按钮状态
    $('.bgCreditcard').removeClass('active default');
    $('.bg-default')
        .prop('disabled', false)
        .removeClass('bg-btn-disabled')
        .addClass('bg-btn-default')
        .text('Set as Default');

    // 设置当前选中卡片状态
    const $currentCard = $(this).closest('.bgCreditcard');
    $currentCard.addClass('active default');

    // 设置当前按钮为默认禁用状态
    $(this)
        .prop('disabled', true)
        .removeClass('bg-btn-default')
        .addClass('bg-btn-disabled')
        .text('Default');
});

常见问题说明 #

• 之前用toggleClass出现多卡激活，是因为toggleClass只会切换当前元素的类，不会清除其他卡片的选中状态，这种互斥的单选场景不能直接用toggleClass，必须先做全局重置
• 之前prop设置禁用不生效，通常是因为选择器没有正确指向当前点击的按钮，或者没有同步处理其他按钮的禁用状态导致逻辑冲突

内容的提问来源于stack exchange，提问作者Valentina Nardini