禁用单选按钮组中的按钮

时间:2016-08-31 13:58:02

标签: javascript jquery html css twitter-bootstrap

我有一个单选按钮组,我想动态启用/禁用按钮。

这是单选按钮组代码:



$("#option1").prop("disabled", true);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="clear: both; display: inline;">
  <div class="btn-group" data-toggle="buttons">
    <label id="option1label" class="btn btn-info active">
      <input type="radio" class="check" name="options" id="option1" checked>1
    </label>
    <label id="option2label" class="btn btn-info">
      <input type="radio" class="check" name="options" id="option2">2
    </label>
    <label id="option3label" class="btn btn-info">
      <input type="radio" class="check" name="options" id="option3">3
    </label>
  </div>
</div>
&#13;
&#13;
&#13;

我在下面尝试了所有这些选项:

$("#option1").prop("disabled", true);

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

$("#option1label").attr("disabled", "disabled");

但它们都不起作用。使用最后一个按钮看起来已禁用,但您仍然可以单击它们并触发事件。

任何想法都赞赏:)

3 个答案:

答案 0 :(得分:1)

你的jquery选择器只关注第一个输入。使用包含您组中所有收音机的选择器,例如:

$(".btn-group input[type='radio']").prop("disabled", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear: both; display: inline;">
    <div class="btn-group" data-toggle="buttons">
        <label id="option1label" class="btn btn-info active">
            <input type="radio" class="check" name="options" id="option1" checked>1
        </label>
        <label id="option2label" class="btn btn-info">
            <input type="radio" class="check" name="options" id="option2">2
        </label>
        <label id="option3label" class="btn btn-info">
            <input type="radio" class="check" name="options" id="option3">3
        </label>
    </div>
</div>

答案 1 :(得分:1)

要禁用组中的引导单选按钮,您需要禁用相应的标签,并且需要处理已禁用标签的单击事件。

1 2 3
4 5 6
7 8 9
1 2 3 0
4 5 6 0
7 8 9 0
0 0 0 1

答案 2 :(得分:0)

你试过这个吗?

$('input[name= options]').attr("disabled",true);