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

您可以使用按钮上的禁用属性来禁用它们，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 选择器中使用它。