Search code examples
javascriptjquerydisabled-input

Removing disabled from checkbox

I have 2 checkboxes styled as toggle buttons. The 2nd checkbox is by default disabled. When the 1st checkbox is to ja I would like the 2nd checkbox to have disabled removed.

I have tried this with 2 codes but I did not succeed. In my console I see no errors.

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

Option 1

<script type="text/javascript">
function remove_disabled() {
    document.getElementById('email_relatie').disabled = false;
}
</script>

Option 2

<script type="text/javascript">
function remove_disabled() {
    document.getElementById('email_relatie').removeAttr('disabled')
}
</script>
Solution

  • For me, document.getElementById("email_relatie").disabled = false; works just fine. Just use the change handler and check if the checkbox is checked or not:

    function remove_disabled() {
  if(document.getElementById("email_user").checked)
    document.getElementById("email_relatie").disabled = false;
  else 
    document.getElementById("email_relatie").disabled = true;
}
    <div class="checkbox">
  <label>
    <input type="checkbox" id="email_user" name="email_user" data-toggle="toggle" data-size="small" data-on="Ja" data-off="Nee" onchange="remove_disabled()">
    Verstuur melding ook per e-mail naar collega.
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" id="email_relatie" name="email_relatie" data-toggle="toggle" data-size="small" data-on="Ja" data-off="Nee" disabled>
    Verstuur een kopie van deze melding naar de relatie.
  </label>
</div>