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

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

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

例如：

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

及

禁用第二行非活动按钮的单击功能，启用活动按钮的单击功能

其他的也一样

下面是此表视图按钮函数的当前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>

您可以使用

：not（）

：

---

上面的一个是绑定按钮上的单击事件，该按钮在父div

中没有
.active
css类。btn toggle

在这里，我假设*在css中有

.active

css类，它将按钮变成绿色背景色

---

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

您需要从DOM加载事件的活动按钮中删除单击事件

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

---

将按钮组包装在容器中，以便于使用相对选择器

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

---

那么你真正的问题是什么。有些东西不起作用了吗？当前它保持为活动/非活动按钮都可单击，我想禁用活动按钮你的意思是什么？确切地说，这就是我想要的现在活动按钮已禁用，您的解决方案50%正确，但要查看实际按钮状态，我应该刷新页面，以前在切换按钮状态时，它显示为无页面刷新，我是否认为“确实，这就是我想要的”并不是你真正想要的？

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

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