如何禁用引导单选按钮？

Question

我想禁用选择引导单选按钮。

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-set-or-raise">
    <input type="radio" name="options" id="option1" val="option1" >Radio 1 

</label>
<label class="btn btn-primary btn-set-or-raise">
    <input type="radio" name="options" id="option2" val="option2" >Radio 2
</label>
<label class="btn btn-primary">
    <input type="radio" name="options" id="option3" >Radio 3
</label>

这是执行此操作的jquery：

$(document).ready(function() {
    $(".btn-group :input").attr("disabled", true);
});

但是我仍然看到可以单击它，并且我检索为已选中的元素！

见jsfiddle

Answer 1

您的代码运行良好，输入无线电上有禁用属性，但仍然单击标签内部的标签作为输入无线电。

也将禁用属性传递给标签

 $(document).ready(function() {
   $(".btn-group label").attr("disabled", true);
   $(".btn-group :input").attr("disabled", true);
 });

 function checkSelected() {
   if ($("input[name=options]:checked").length > 0)
     console.log("one is selected!");
   else
     console.log("none are selected!");
 }

label[disabled]{
  pointer-events:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary btn-set-or-raise">
    <input type="radio" name="options" id="option1" val="option1">Radio 1

  </label>
  <label class="btn btn-primary btn-set-or-raise">
    <input type="radio" name="options" id="option2" val="option2">Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3">Radio 3
  </label>
</div>
<input type="button" onclick="checkSelected()" value="Check Selected" />

注意：这只会阻止它向您显示其点击事件，但如果您需要完全阻止它pointer-events:none在 css 中点击传递到禁用标签