禁用单击 Jquery Toggle 按钮中的选定状态

Question

我刚刚创建了一个 MVC 4 应用程序，其中有一个包含许多行的表。每行都有一个活动或非活动状态。

如果记录处于活动状态，则显示此按钮（如上图第二行所示）。

<button 
    class="btn btn-xs active btn-primary" 
    data-HEI_ID = @item.HEI_ID 
    data-status = "true">Active
</button>  
<button 
    class="btn btn-xs inactiveColor btn-default" 
    data-HEI_ID = @item.HEI_ID 
    data-status = "false">Inactive
</button>

如果它处于非活动状态，则显示此按钮（如上图第一行）：

<button 
    class="btn btn-xs btn-default" 
    data-HEI_ID = @item.HEI_ID 
    data-status = "true">Active
</button>                       
<button 
    class="btn btn-xs inactiveColor btn-primary active" 
    data-HEI_ID = @item.HEI_ID 
    data-status = "false">Inactive
</button>

这里是 jQuery 函数：

$('.btn-toggle').click(function () {

    $(this).find('.btn').toggleClass('active');

    if ($(this).find('.btn-primary').size() > 0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size() > 0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size() > 0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size() > 0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default'); {

    }

});

但是当我点击选中的状态时，无论是活动的还是非活动的，它都在切换按钮。

如何使用 jQuery 防止这种情况发生？

Answer 1

您已经为按钮的父元素绑定了单击处理程序，但您可以为按钮绑定它，除非其中包含 active 类，因为这表示选定状态。

$('.btn.btn-xs').click(function () {
    //return if clicked button have class active
    if($(this).hasClass('active'))
       return false;

    var $parent = $(this).closest('.btn-toggle');
    $parent.find('.btn').toggleClass('active');
    if ($parent.find('.btn-primary').size() > 0) {

        $parent.find('.btn').toggleClass('btn-primary');
    }
    if ($parent.find('.btn-danger').size() > 0) {
        $parent.find('.btn').toggleClass('btn-danger');
    }
    if ($parent.find('.btn-success').size() > 0) {
        $parent.find('.btn').toggleClass('btn-success');
    }
    if ($parent.find('.btn-info').size() > 0) {
        $parent.find('.btn').toggleClass('btn-info');
    }

    $parent.find('.btn').toggleClass('btn-default'); {

    }

});