禁用 Twitter Bootstrap 按钮组

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>

- thraxst

---

你可以通过JavaScript或jQuery来实现这一点，但我很好奇为什么？如果人们改变主意想要选择另一个怎么办？ - Godinall

@Godinall，您能否举个例子，如何使用JavaScript或jQuery实现？难道不能使用Bootstrap工具吗？如果您想制作只读表单，这可能会很有用。 - user2104560

@baurzhan Bootstrap的JS工具是jQuery。 - Mark Carpenter Jr

Answer 1

您可以在按钮上使用disabled属性来禁用它们的使用，如Bootstrap文档中所述。它基本上涉及将属性'disabled'添加到按钮元素中，如下所示;

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

- Rob Quincey

---

这会禁用按钮，但我希望找到一种方法来保留样式，这样用户就可以看到他们选择的按钮。 - thraxst

@thraxst，你最终解决了这个问题吗？因为我也在寻找同样的东西。 - Chud37

@Chud37 和 thraxst，请尝试将以下内容添加到您的 CSS 中：.btn-primary.active[disabled] { background-color: #e6e6e6 !important; } - THelper

如果您使用定义为btn btn-group的div并且还使用data-toggle="buttons"，而不是按钮组中的btn-group按钮，则可以将标签用作实际按钮。当禁用时，设置整个切换到attr('data-toggle','off')的div似乎可以工作，并保持您预设的颜色。 - V H

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

对我来说似乎工作得很好。

- Chud37

Answer 3

在v4.0.0之前，Bootstrap切换按钮不支持.disabled或[disabled]属性：

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

- Timothé Delion