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

对于演示，请查找以下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

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

Bootstrap使用data-toggle =按钮禁用radio btn-group

2 个答案: