javascript - 在 Bootstrap 中隐藏按钮

Question

我正在尝试在 Bootstrap 中隐藏一个或多个单选按钮。请参阅jsfiddle .

setTimeout(function () {
    $("input[value='other']").parent().hide();
}, 1000);

它按预期工作，只是删除任一侧面按钮会使新侧面按钮的样式不正确(没有圆 Angular )。在示例中，删除“女性”效果很好，但删除“男性”或“其他”会导致按钮行样式不正确。

解决这个问题最简单的方法是什么？请注意，在某些情况下我可能必须取消隐藏按钮，因此仅仅从 DOM 中删除它是不可取的。

Answer 1

Bootstrap 将样式应用于最后一个元素。

解决方案 I (如果您不想删除按钮而只是隐藏它):

在 css 中创建一个类以提供圆 Angular 并将该类添加到 prev() 元素。当您 show() 元素时，只需删除此类。 Fiddle

JS:

setTimeout(function () {
    $("input[value='other']").parent().prev().addClass('pseudoLast')
    $("input[value='other']").parent().hide();

}, 1000);

CSS:

.pseudoLast{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

当您显示按钮时，只需执行以下操作:

$("input[value='other']").parent().prev().removeClass('pseudoLast')
$("input[value='other']").parent().show();

解决方案二:

您需要删除元素 fiddle

js:

setTimeout(function () {
    $("input[value='other']").parent().remove(); // < here
}, 1000);

稍后您可以附加该元素。