如果活动类中的按钮，则禁用切换按钮单击功能

Question

我刚刚创建了mvc 4应用程序。这是该项目表的视图。

我想禁用当前活动按钮的可点击功能

例如：

禁用第一行的点击功能激活按钮，启用非活动按钮的点击功能

和

禁用第2行的点击功能非活动按钮，启用活动按钮的点击功能

同样是其余部分。

这里是该表视图按钮功能的当前cshtml代码

<div class="btn-group btn-toggle" id="btn-toggle"> 


     @if (item.Status == true)
     {
<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>

    }

    else
   {
<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>

  }                        

  </div>

这是处理此按钮的JavaScript代码段

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

        $(this).find('.btn').toggleClass('active');
        //if ($(this).find('btn-primary').toggleClass('active')) {
        //$(this).prop('disabled', true);

        //}
        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');

});

Answer 1

您可以使用:not()：

$('.btn-toggle').find('button:not(.active)').click(function () {

以上是在父div [{1}}

中没有.active css类的按钮上绑定点击事件

我假设你在css中有.btn-toggle css类，它以绿色背景颜色转动按钮。

_{*：您可以将其替换为活动类。}

Answer 2

将您的按钮组包装在容器中，以便更容易使用相对选择器

<div>
    <button class="inactive">Active</button>
    <button disabled="disabled">InActive</button>
</div>

然后使用以下脚本

$('button').click(function() {
    if (!$(this).hasClass('inactive')) {
        return;
    }
    $(this).closest('div').children('button').toggleClass('inactive');
    $(this).prop('disabled', true);
    $(this).siblings('button').prop('disabled', false);
});

Refer fiddle

Answer 3

您需要从DOM加载事件

上的活动按钮中删除click事件

$(document).ready(function(){
  $('.active').unbind('click');
}