c# - 在 Jquery 切换按钮中禁用对选定状态的单击

Question

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

如果记录处于事件状态，则会显示此按钮(如上图第 2 行所示)。

<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

您已经为按钮的父元素绑定(bind)了点击处理程序，您可以为按钮绑定(bind)它，除非其中有类 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'); {

    }

});