禁用 Twitter 引导按钮组答案

【问题标题】：Disable Twitter Bootstrap Button Group禁用 Twitter 引导按钮组
【发布时间】：2014-05-07 12:52:23
【问题描述】：

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

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

【问题讨论】：

你可以通过 javascript 或 jquery 做到这一点，但我很好奇为什么？如果人们改变主意并想选择另一个怎么办？
@Godinall 您能否举例说明如何使用 javascript 或 jquery 进行操作？不能通过引导工具完成吗？如果您想制作只读表单，它可能会很有用。
@baurzhan Bootstrap 的 JS 工具是 jQuery

标签： jquery html twitter-bootstrap twitter-bootstrap-3 buttongroup

【解决方案1】：

您可以使用按钮上的 disabled 属性来禁用它们，as described in the Bootstrap docs。它本质上涉及向按钮元素添加“禁用”属性，如下所示；

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

请记住，以上内容会将此行为应用于具有此类名称的所有按钮组。如果您不希望这样，则需要将 ID 添加到 btn 组 div 并在 jQuery 选择器中使用它。

【讨论】：

这确实禁用了按钮，但我正在寻找一种方法来保持样式，以便用户可以看到他们选择的按钮。
@thraxst 你有没有为此找到解决方案？因为我正在寻找同样的东西。
@Chud37 和 thraxst 尝试将其添加到您的 css：.btn-primary.active[disabled] { background-color: #e6e6e6 !important; }
如果您使用定义 btn btn-group 的 div 并使用 data-toggle="buttons" 的 btn-group 按钮，然后使用标签作为实际按钮，该怎么办。当禁用设置整体 div 时，它确实切换到 attr('data-toggle','off') ，这似乎可以工作并保持你预设的颜色

【解决方案2】：

我也想保留样式，所以我省略了 disabled 字段，只是用一个新类 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);
}

..似乎对我很有效。

【讨论】：

【解决方案3】：

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

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

【讨论】：