title: Hide checkbox inside togglebutton
body: <p>I want to remove the checkbox inside toggle button. When a toggle button is on or off, I want the checkbox to be hidden. </p>
  
  <p>This is my sample code:</p>
  
  <pre><code>&lt;div class="form-group has-feedback"&gt;
    &lt;input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}"&gt;
    &lt;div&gt;
      &lt;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;"&gt;
      &lt;span class="button-checkbox bootstrap-checkbox"&gt;
        &lt;button type="button" class="btn clearfix custom-btn"&gt;
          &lt;span class="icon fa fa-check theme-text" style="display:none;"&gt;&lt;/span&gt;
          &lt;span class="icon fa fa-check-square"&gt;&lt;/span&gt;
          &lt;span class="icon cb-icon-check-indeterminate" style="display:none;"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/span&gt;
      &lt;label class="switch"&gt;
        &lt;input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false"&gt;
        &lt;span class="slider round"&gt;&lt;/span&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ako5z18m/" rel="nofollow noreferrer">Jsfiddle example</a></p>
  
  <p>I tried few CSS to hide the checkbox but it is not working. I tried:</p>
  
  <pre><code>button.btn.clearfix.custom-btn{
      display:none
  }
  </code></pre>
  
  <p>But this is hiding all the check boxes on the page</p>