Отображать отметки рядом с флажками, если введены другие данные

Question

Я пытаюсь показать установленный флажок, если значение выбрано на выбранном входе. Поэтому, если кто-то выбирает любое значение в раскрывающемся списке, я хочу, чтобы флажок переключился с выключенного на включенный. Вот пример html.

Я пробовал разные вещи, чтобы добиться этого, но он вообще не работает. Моя последняя попытка выглядит так:

$(document).ready(function() {
  $('#subject').each(function() {
    if (this.selected)
      $("#box-4").prop("checked", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
  <option value="none" selected disabled hidden>none</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<input type="checkbox" id="box" disabled="disabled">

Думаю, я на правильном пути, но не понимаю, почему это вообще не работает.

Answer 1

$(document).ready(function() {
  $('#subject').click(function() {
    var option = document.getElementById('subject');
    console.log(option.value);
    if (option.value ==1 ||option.value==2)
      $("#box").prop("checked", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
  <option value="none" selected disabled hidden>none</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<input type="checkbox" id="box" >

Answer 2

1. Должно быть .change()

2. Не проверять, выбрано оно или нет

$(document).ready(function() {
  // Change event
  $('#subject').change(function() {
    // On change, at first reseting all checkboxes state
    $('input[type="checkbox"]').each(function() {
      $(this).prop('checked', false);
    });
    // After reseting checkboxes state, check the appropriate checkbox
    $("#box-" + this.value).prop("checked", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
  <option value="none" selected disabled hidden>none</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<input type="checkbox" id="box-1" disabled>
<input type="checkbox" id="box-2" disabled>