Question

我想禁用选择bootstrap单选按钮。

<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

你的代码正常工作禁用属性是否在输入无线电上但是仍然在标签上点击工作作为输入无线电在标签内。

将禁用的属性传递给标签

＆＃13;

 $(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!");
 }

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

我希望这个帮助你

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
$(document).ready(function () {
    $("input[type=radio]").attr("disabled", "disabled");
  });
    </script>

Answer 3

你可以使用这样的html属性：

<input type="radio" disabled="disabled">

或者你可以通过获取id选择器来使用jquery：

$("#option1").attr('disabled',true);

请参阅Disabling radio buttons with jQuery

Answer 4

您需要将disabled类添加到标签，该标签是单选按钮的父级：

$(".btn-group label").addClass("disabled");

我们这里更新了fiddle

Answer 5

将disabled类添加到您喜欢的标签中。以下是代码中的示例：

<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" disabled="disabled">Radio 2
</label>
<label class="btn btn-primary">
    <input type="radio" name="options" id="option3" >Radio 3
</label>

我禁用了第二个无线电选项

如何禁用bootstrap单选按钮？

5 个答案: