Html 隐藏切换按钮内的复选框

我想删除切换按钮内的复选框。当切换按钮打开或关闭时，我希望复选框被隐藏

这是我的示例代码：

<div class="form-group has-feedback">
  <input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
  <div>
    <input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
    <span class="button-checkbox bootstrap-checkbox">
      <button type="button" class="btn clearfix custom-btn">
        <span class="icon fa fa-check theme-text" style="display:none;"></span>
        <span class="icon fa fa-check-square"></span>
        <span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
      </button>
    </span>
    <label class="switch">
      <input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
      <span class="slider round"></span>
    </label>
  </div>
  <span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>

---

但是这会隐藏页面上的所有复选框，您应该能够通过向CSS添加以下内容来解决此问题：

.switch button {
  display:none;
}

以下是添加此CSS的工作示例：

/*添加此*/
.开关按钮{
显示：无；
}
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
.switchbtn{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.btn:以前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+开关BTN{
背景色：#2196F3；
}
输入：焦点+开关BTN{
盒影：0 0 1px#2196F3；
}
输入：选中+。开关BTN:之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.switchbtn{
边界半径：34px；
}
.btn:以前{
边界半径：50%；
}

---

将

.switch

添加到之前，仅针对开关的子按钮（=在

switch

类下）：

---

更新代码：

开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
.switchbtn{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.btn:以前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+开关BTN{
背景色：#2196F3；
}
输入：焦点+开关BTN{
盒影：0 0 1px#2196F3；
}
输入：选中+。开关BTN:之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.switchbtn{
边界半径：34px；
}
.btn:以前{
边界半径：50%；
}
.switch button.btn.clearfix.custom-btn{
显示：无
}

---

您是否尝试过为您的toggleButton设置一个唯一的id，然后将该id单独设置为显示：无？

.switch button {
  display:none;
}

  .switch button.btn.clearfix.custom-btn {
    display: none
  }