When adding Bootstraptoggle checkboxes getting corrupted

[Muiter1]

This code is working (form is send and checkboxes are received when checked, toggle_disabled() also works)

<form action="xxx.php>
<div class="checkbox">
  <label>
    <input type="checkbox" id="add_email_user" name="add_email_user" value="ja" onclick="toggle_disabled()">
    Verstuur melding ook per e-mail naar collega.
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" id="add_email_relatie" name="add_email_relatie" value="ja" disabled>
    Verstuur een kopie van deze melding naar de relatie.
  </label>
</div>
</form>

<script type="text/javascript">
function toggle_disabled() {
  if(document.getElementById("add_email_user").checked)
    document.getElementById("add_email_relatie").disabled = false;
  else 
    document.getElementById("add_email_relatie").disabled = true;
}
</script>

But when I add bootstraptoggle to checkboxes then toggle_disabled() stops working and the checkboxes are not received when the form is send. This is the code with bootstraptoggle applied. Any suggestions are much appreciated.

<div class="checkbox">
  <label>
    <input type="checkbox" id="add_email_user" name="add_email_user" value="ja" data-toggle="toggle" data-size="small" data-on="Ja" data-off="Nee" onclick="toggle_disabled()">
    Verstuur melding ook per e-mail naar collega.
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" id="add_email_relatie" name="add_email_relatie" value="ja" data-toggle="toggle" data-size="small" data-on="Ja" data-off="Nee" disabled>
    Verstuur een kopie van deze melding naar de relatie.
  </label>
</div>