Question

我在页面上有一个用于选择的按钮组。选择完成后，我希望按钮组仍然可见，以便用户可以看到他们所做的选择，但我不希望他们再次使用它。有没有办法禁用按钮组？

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

Answer 1

您可以使用按钮上的disabled属性禁用其使用as described in the Bootstrap docs。它主要涉及添加属性＆＃39;禁用＆＃39;按钮元素，就像这样;

<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选择器中使用它。

Answer 2

我也希望保留样式，所以我省略了禁用的字段，只是使用新的display-only版来反击CSS：

<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);
}

..似乎对我有用。

Answer 3

在v4.0.0之前，Bootstrap Toggle按钮不支持.disabled或[disabled]：

https://github.com/twbs/bootstrap/issues/21237

Answer 4

这是css v3.4.1的最新引导文件。 https://getbootstrap.com/docs/3.4/css/

我通过使用“禁用”类解决了我的问题，如下所示：

<div class="btn-group-vertical disabled">
   <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>

禁用Twitter Bootstrap按钮组

4 个答案: