Question

我正在尝试隐藏引导程序中的一个或多个单选按钮。请参阅jsfiddle。

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

除了删除任何一个侧面按钮使新的侧面按钮设置不正确（没有圆角）之外，它按预期工作。在示例中删除“女性”工作正常，但删除“男性”或“其他”会导致按钮行格式不正确。

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

Answer 1

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

解决方案I （如果您不想删除按钮并隐藏它）：

在css中创建一个类以提供圆角并将该类添加到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;
}

当您按下show按钮时：

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

解决方案II ：

您需要删除元素fiddle

JS：

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

稍后你可以附加元素。

Answer 2

CSS将样式应用于'btn-group'中的最后一个元素hide（）方法只是将'display：none'添加到元素中，CSS仍将其解释为最后一个元素，因为它仍然是DOM。

所以你需要从DOM中完全删除它

otherEl = $("input[value='other']").parent();
$("input[value='other']").parent().remove();

稍后添加：

$("#gender").append(otherEl);

https://jsfiddle.net/sjmcpherso/j1am57r7/

我看不到上述方法的非DOM删除方法有任何好处，但如果你这样做，请告诉我

在引导程序中隐藏按钮

2 个答案: