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

Posted 2023-05-09

【中文标题】禁用单击 Jquery Toggle 按钮中的选定状态

【英文标题】：Disable click for selected state in Jquery Toggle button

【发布时间】：2015-08-06 15:58:36

【问题描述】：

我刚刚创建了一个 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 防止这种情况发生？

【问题讨论】：

您想禁用切换功能吗？还是？

问题需要更清楚。

【参考方案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'); 

    

);

【讨论】：

天哪，我花了 2 周的时间来解决这个问题，你像上帝一样来解决我的问题。非常感谢，愿你的道路更加成功和光明