我在用于选择的页面上有一个按钮组。做出选择后，我希望按钮组仍然可见，以便用户可以看到他们所做的选择，但我不希望他们能够再使用它。有没有办法禁用按钮组？
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-lg">Option 1</button>
<button type="button" class="btn btn-primary btn-lg">Option 2</button>
<button type="button" class="btn btn-primary btn-lg">Option 3</button>
</div>
您可以使用按钮上的 disabled 属性来禁用它们，如 Bootstrap 文档中所述。它本质上涉及将属性“禁用”添加到按钮元素，如下所示；
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 1</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 2</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 3</button>
</div>
一旦你完成了你想做的任何事情，你就可以使用 jQuery 动态添加这个属性
$('.btn-group-vertical button').attr('disabled','disabled');
如果你想重新启用它
$('.btn-group-vertical button').removeAttr('disabled');
请记住，以上内容会将此行为应用于具有此类名称的所有按钮组。如果您不希望这样，您需要向 btn 组 div 添加一个 ID 并在 jQuery 选择器中使用它。
我也想保留样式，所以我省略了 disabled 字段，只是用一个新类来抵消 CSS display-only：
<div class='btn-group display-only' data-toggle='buttons'>
<label class='btn btn-default button-array'>Friday PM</label>
<label class='btn btn-default button-array'>Saturday AM</label>
<label class='btn btn-default button-array'>Graduation</label>
<label class='btn btn-default button-array'>Saturday PM</label>
<label class='btn btn-default button-array'>Sunday AM</label>
<label class='btn btn-default button-array'>Sunday PM</label>
<label class='btn btn-default button-array'>Monday AM</label>
</div>
和CSS：
.btn-group.display-only label.btn {
pointer-events: none;
cursor: not-allowed;
}
.btn-group.display-only label.btn.active {
opacity: 1;
color: #333;
background-color: #e6e6e6;
border-color: #adadad;webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
..似乎对我很有效。
在 v4.0.0 之前，Bootstrap Toggle 按钮不支持 .disabled 或 [disabled] ：