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

Answer 1

您可以使用按钮上的disabled属性禁用它们,如Bootstrap文档中所述.它主要涉及将属性'disabled'添加到button元素,就像这样;

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