Bootstrap 使用 data-toggle=buttons 禁用单选 btn-group

Question

我正在使用 bootstrap 3.3.6，并且我正在尝试禁用这种类型的无线电 btn-group。我尝试将禁用功能放在标签和输入上，但似乎不起作用。这些按钮将显示为禁用但仍可单击。每当我单击按钮时，就会添加一个活动类。

<div class="btn-group" data-toggle="buttons"> 
 <label class="btn btn-default disabled">
  <input type="radio" class="toggle" value="0" disabled="disabled">NO 
 </label>

 <label class="btn btn-default disabled">
  <input type="radio" class="toggle" value="1" disabled="disabled">YES
 </label>
</div>

我究竟做错了什么？是否可以禁用按钮？

Answer 1

输入上的属性disabled将禁用它，就像在禁用输入时您无法更改输入的值一样。您所看到的是 bootstrap 添加的 CSS stypes，当您从输入中移除鼠标时，它看起来有点像发生了变化。

您可以使用一点 jQuery 来防止这些样式：

$(".btn.disabled").mouseout(function(){ 
  $(this).removeClass("active");
  $(this).addClass("disabled");
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" data-toggle="buttons"> 
 <label class="btn btn-default disabled">
  <input type="radio" class="toggle" value="0" disabled>NO 
 </label>

 <label class="btn btn-default disabled">
  <input type="radio" class="toggle" value="1" disabled>YES
 </label>
</div>