html - 自定义复选框状态不会在 Bootstrap 崩溃时更新

Question

我已经搜索了一段时间并尝试了一些不同的东西 - 但对于我来说似乎无法让这个工作。

在下面的 codepen 中是一个自定义复选框的示例，当复选框被选中时，div 被切换为显示/隐藏，还有一个正常的复选框，其中折叠功能和复选框按预期工作

我一辈子都无法理解为什么自定义复选框在选中时不会更改状态 - 如果我删除数据切换，自定义复选框会起作用，但一旦引入数据切换，它就会失败。

codepen.io/anon/pen/JzYOpZ

如果不清楚 - 我希望复选框状态在单击时在选中/未选中之间切换并显示可折叠的 div。

Answer 1

您必须使用不同的类更改 svg 的 fill 属性 这是更新的笔 https://codepen.io/anon/pen/pYjppK

我更改的 css 如下所示

.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.cbx span:first-child svg {
  fill: blue;
}

.cbx.collapsed span:first-child svg {
  fill: none;
}

当最初加载复选框时，我将折叠类添加到复选框中，如下所示

<label class="cbx collapsed" for="test" data-toggle="collapse" href="#collapseOne">