禁用 Twitter Bootstrap 按钮组

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

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

您可以使用按钮上的禁用属性来禁用它们的使用，如 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');

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