Активность input в зависимости от выбора checkbox, как?

Question

[locus]

Требуется сделать форму, в которой будет зависимость активности и присвоения определенного значения инпуту от выбора чекбокса:
Форма:

<div class="checkbox-block">
  <input id="incall" type="checkbox">
  <label for="incall">Incall</label> 
</div>
  <div class="m-3">
    <input id="30-incall-select" type="text" placeholder="30 min incall" >
  </div>
  <div class="m-3">
    <input id="60-incall-select" type="text" placeholder="1 our incall">
  </div>
  <div class="m-3">
    <input id="120-incall-select" type="text" placeholder="2 our incall" >
  </div>
  <div class="m-3">
    <input id="180-incall-select" type="text" placeholder="3 our incall" >
  </div>

Делаю скрипт:

$(document).ready(function() {
  if ($('#incall').is(':checked')) {
$('#30-incall-select').prop( "disabled", false );
$('#60-incall-select').prop( "disabled", false );
$('#120-incall-select').prop( "disabled", false );
$('#180-incall-select').prop( "disabled", false );

  } else {
$('#30-incall-select').prop( "disabled", true );
$('#60-incall-select').prop( "disabled", true );
$('#120-incall-select').prop( "disabled", true );
$('#180-incall-select').prop( "disabled", true );
  }
});

$('#incall').on('change', function() {
  if(this.checked) {
   $('#30-incall-select').prop( "disabled", true );
$('#60-incall-select').prop( "disabled", true );
$('#120-incall-select').prop( "disabled", true );
$('#180-incall-select').prop( "disabled", true );
  } else {
$('#30-incall-select').prop( "disabled", false );
$('#60-incall-select').prop( "disabled", false );
$('#120-incall-select').prop( "disabled", false );
$('#180-incall-select').prop( "disabled", false );
  }
});

получается какая-то дребедень. Как сделать активность в зависимости от смены значения чекбокса? и в дополнение как неактивным инпутам присваивать значение 0?

Comments

[Сергей Сергей]

document.querySelector('#incall').onclick = function() {
  //console.log(this,this.checked);
  document.querySelectorAll('.m-3 input')
    .forEach( p => p[this.checked?'setAttribute':'removeAttribute'] ('disabled',true) )
}

[locus]

Сергей Сергей, бед в чем. Изначально когда прогрузилась страница checkbox должен иметь статус нажато и инпуты соответственно должны быть активны, после снятия статус checked, поля инпут блокируются. В этом случае наоборот

[Сергей Сергей]

"инвертируй это"

[locus]

Сергей Сергей,над этим и бьюсь) пока не получилось, только в прямом направлении работает

Answer 1

[Сергей Соколов]

setAttribute() или removeAttribute() для управления атрибутом disabled



В разметке небольшой косяк: id элементов должны начинался только с буквы.

Comments

[locus]

немного не так, чекбокс при загрузке изначально с галочками должен быть и инпуты активны. ПРи снятии галочки инпуты становятся неаактивными. В вашем примере наоборот - при нажатии на чекбокс они становятся неактивными) в этом вся беда

[Сергей Соколов]

придется вам самостоятельно разобраться,где же тут защита от прямой копипасты