javascript - 如果按钮在事件类中，则禁用切换按钮单击功能

Question

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

我想禁用当前事件按钮的可点击功能

例如:

禁用第一行Active按钮的点击功能，启用Inactive按钮的点击功能

和

禁用第二行非事件按钮的点击功能，启用事件按钮的点击功能

其余部分也同样。

这里是此 TableView 按钮功能的当前 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 .btn-toggle中没有.active css类的按钮上绑定(bind)一个点击事件

我假设*您在 css 中有 .active css 类，它将按钮变成绿色背景颜色。

_{*:您可以将其替换为您的事件类。}