Bootstrap 使用 data-toggle=buttons 禁用无线电 btn-group答案

【问题标题】：Bootstrap disabling radio btn-group with data-toggle=buttonsBootstrap 使用 data-toggle=buttons 禁用无线电 btn-group
【发布时间】：2017-05-25 06:58:20
【问题描述】：

我正在使用引导程序 3.3.6，并且我正在尝试禁用这种类型的无线电 btn 组。我试过在标签和输入上都放置禁用，但它似乎不起作用。这些按钮将显示为已禁用但仍可单击。每当我单击按钮时，都会添加一个活动类。

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

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

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

对于演示，请在下面找到 jsfiddle 的链接

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary disabled">
    <input type="radio" autocomplete="off"> Radio 1 (pre-checked)
  </label>
  <label class="btn btn-primary active disabled">
    <input type="radio" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary disabled">
    <input type="radio" autocomplete="off"> Radio 3
  </label>
</div>

Demo

【讨论】：

【解决方案2】：

输入的disabled 属性将禁用它，例如，当输入被禁用时，您无法更改输入的值。您看到的是 bootstrap 添加的 CSS 类型，当您从输入中移开鼠标时，它看起来像是发生了一些变化。

你可以用一点 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>

【讨论】：