Removing disabled from checkbox

Question

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>

I would guess the click event is being absorbed by the style plugin (maybe through `event.stopPropagation()`). You might want to try changing the event binding to "onchange" instead. Also, please create a [mcve] in the question itself. — Nisarg Shah, Aug 02 '18 at 13:45
Are there any errors in the console? because I tested option 1 and it worked. — martinho, Aug 02 '18 at 13:46
Where do you put your script because the first option works for me: http://jsfiddle.net/kj4rxfy9/1/. Are you clicking the label and not the actual checkbox? — Pete, Aug 02 '18 at 13:50
Are you including your script in your page *before* your radio buttons? — Taplar, Aug 02 '18 at 13:50
http://jsfiddle.net/t6upravz/ This logic works fine, provided the script is above the markup for the checkboxes, since you are using inline bindings. — Taplar, Aug 02 '18 at 13:51
You could also do something like an onChange, then you could say if the value of the checkbox is "ja" to remove the attribute, otherwise it is "nee" and you want it disabled. — sdexp, Aug 02 '18 at 13:54

score 2 · Accepted Answer · answered Aug 02 '18 at 13:51

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>

score 0 · Answer 2 · answered Aug 02 '18 at 13:51

I am guessing you want the checkbox to be disabled again once the first checkbox is unchecked, otherwise your given code would work. You can achieve this by setting the disabled attribute to false when the first checkbox is checked, and true when it is not.

function toggle_disabled() {
    document.getElementById('email_relatie').disabled = !document.getElementById('email_user').checked;
}

 <label>
    <input type="checkbox" id="email_user" name="email_user" 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="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

score 0 · Answer 3 · answered Aug 02 '18 at 13:56

0

have you try ?

<input type="checkbox" ... disabled="disabled">

document.getElementById('email_relatie').removeAttr('disabled');

answered Aug 02 '18 at 13:56

Jc CASA

11
1

score -1 · Answer 4 · answered Aug 02 '18 at 13:49

-1

You can use do like this:

$("input[name='email_relatie']").prop("disabled", false);

answered Aug 02 '18 at 13:49

Cryptex Technologies

1,153
9
16

This is the same as `domElement.disabled = false` that they have in their first example. – Taplar Aug 02 '18 at 13:50
Yes, you are right. Thanks for the feedback! It has skipped by me while checking. – Cryptex Technologies Aug 02 '18 at 14:01

score -2 · Answer 5 · answered Aug 02 '18 at 13:45

-2

Use the .prop()

$("[type='checkbox']").prop("disabled", false);

answered Aug 02 '18 at 13:45

wscourge

10,657
14
59
80

This is the same as `domElement.disabled = false` that they have in their first example. – Taplar Aug 02 '18 at 13:48

Removing disabled from checkbox

5 Answers5