twitter-bootstrap 禁用 Twitter Bootstrap 按钮组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23518378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Twitter Bootstrap Button Group
提问by thraxst
I have a button group on a page that is used for a selection. After the selection is made I want the button group to still be visible so the user can see the selection they made, but I don't want them to be able to use it anymore. Is there a way to disable to the button group?
我在用于选择的页面上有一个按钮组。选择完成后，我希望按钮组仍然可见，以便用户可以看到他们所做的选择，但我不希望他们再使用它。有没有办法禁用按钮组？
<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>
采纳答案by Rob Quincey
You can use the disabled attribute on the buttons to disable their use, as described in the Bootstrap docs. It essentially involves adding the attribute 'disabled' to the button element, like so;
您可以使用按钮上的 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>
You can use jQuery to dynamically add this attribute once you've done whatever you want to do
完成任何您想做的事情后，您可以使用 jQuery 动态添加此属性
$('.btn-group-vertical button').attr('disabled','disabled');
And if you wanted to re-enable it
如果你想重新启用它
$('.btn-group-vertical button').removeAttr('disabled');
Bear in mind that the above would apply this behaviour to all button groups with this class name. If you don't want that you'll need to add an ID to the btn group div and use that in the jQuery selector.
请记住，以上内容会将这种行为应用于所有具有此类名称的按钮组。如果您不想这样做，则需要向 btn 组 div 添加一个 ID，并在 jQuery 选择器中使用它。
回答by Chud37
I wanted to keep the styling too, So I left out the disabled field and just counter-acted the CSS with a new class display-only:
我也想保留样式，所以我省略了 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>
And the CSS:
和 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);
}
..Seems to work well for me.
..似乎对我来说效果很好。
回答by Timothé Delion
Before v4.0.0, Bootstrap Toggle buttons do not honor .disabled or [disabled] :
在 v4.0.0 之前，Bootstrap Toggle 按钮不支持 .disabled 或 [disabled] ：
回答by Mina chen
Here is newest bootstrap document with css v3.4.1. https://getbootstrap.com/docs/3.4/css/
这是带有 css v3.4.1 的最新引导文件。https://getbootstrap.com/docs/3.4/css/
I solved my problem by use class "disabled", like this:
我通过使用类“禁用”解决了我的问题，如下所示：
<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>
