[解決済み] Bootstrapの入力フィールド付きチェックボックス

What is your favorite color?
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id1">
  <label class="custom-control-label" for="id1">Red</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id2">
  <label class="custom-control-label" for="id2">Green</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id3">
  <label class="custom-control-label" for="id3">Blue</label>
</div>
ADD "OTHER" INPUT HERE

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>


What is your favorite color?
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id1">
  <label class="custom-control-label" for="id1">Red</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id2">
  <label class="custom-control-label" for="id2">Green</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id3">
  <label class="custom-control-label" for="id3">Blue</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id4">
  <label class="custom-control-label" for="id4">Other</label>
  <input type="text" placeholder="Custom Color Choice">
</div>

$("#myTextBox").on("keyup", function() {
    if ($("#myTextBox").val().length === 0) {
        $('#id4').prop('checked', false);
    } else {
        $('#id4').prop('checked', true);
    }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

What is your favorite color?
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id1">
  <label class="custom-control-label" for="id1">Red</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id2">
  <label class="custom-control-label" for="id2">Green</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id3">
  <label class="custom-control-label" for="id3">Blue</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="id4">
  <label class="custom-control-label" for="id4">Other</label>
  <input id="myTextBox" type="text" placeholder="Custom Color Choice">
</div>