Удаление отключено из флажка

У меня есть 2 флажка в стиле кнопок переключения. 2-й флажок по умолчанию disabled, Когда 1-й флажок на JA, я хотел бы, чтобы 2-й флажок имел disabled удален.

Я пробовал это с 2 кодами, но мне не удалось. В моей консоли я не вижу ошибок.

<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>

Опция 1

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

Вариант 2

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

5 ответов

Решение

Для меня, document.getElementById("email_relatie").disabled = false; работает просто отлично. Просто используйте change обработчик и проверьте, установлен ли флажок или нет:

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>

Ты пробовал?

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

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

Я предполагаю, что вы хотите, чтобы флажок был снова отключен после того, как первый флажок снят, иначе ваш код будет работать. Этого можно добиться, установив для атрибута disabled значение false, если установлен первый флажок, и значение true, если это не так.

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

Вы можете использовать сделать так:

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

Использовать .prop()

$("[type='checkbox']").prop("disabled", false);
Другие вопросы по тегам