如何阻止用户切换使用bootstrap buttongroups创建的复选框按钮

Question

我创建了boostrap buttongroup for checkboxes，如下所示：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default"><input type="checkbox" id="d1" />1</label>
    <label class="btn btn-default"><input type="checkbox" id="d2" />2</label>
    <label class="btn btn-default"><input type="checkbox" id="d3" />3</label>
    <label class="btn btn-default"><input type="checkbox" id="d4" />4</label>
    <label class="btn btn-default"><input type="checkbox" id="d5" />5</label>
    <label class="btn btn-default"><input type="checkbox" id="d6" />6</label>
</div>

我想使用Js禁用其中一些。我已经尝试过了：

$("#d2").attr("locked", true);
$("#d2").attr('disabled', true);
$("#d2").parent().attr('disabled', true);
$("#d2").parent().addClass('disabled');

它将按钮显示为已禁用但是它不会删除它的功能。当我点击它仍然切换active状态。

已停用按钮2

点击

后禁用按钮2

如何阻止用户切换它？以下是此问题的摘录示例。

＆＃13;

＆＃13;

$("#d2").prop("checked", false);
$("#d2").prop("locked", true);
$("#d2").prop("disabled", true);
$("#d2").parent().prop('disabled', true);

＆＃13;

.active {
  background-color: green!important;
  color: white!important;
}

＆＃13;

<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>
<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"><input type="checkbox" id="d1" />1</label>
  <label class="btn btn-default"><input type="checkbox" id="d2" />2</label>
  <label class="btn btn-default"><input type="checkbox" id="d3" />3</label>
  <label class="btn btn-default"><input type="checkbox" id="d4" />4</label>
  <label class="btn btn-default"><input type="checkbox" id="d5" />5</label>
  <label class="btn btn-default"><input type="checkbox" id="d6" />6</label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试：

$("#d2").prop('disabled', true);

这适合我。