JQuery - Hiding/Showing items on form based on checkbox/select

Question

I am hiding inputs on my modal form. I am using both a select dropdown and a checkbox. My code is working fine but I want to better understand what I have done as I am still new to JQuery.

For the checkbox the code works fine without calling the function once the modal is opened however for the select to work I have to call the code once the modal is open. I want to better understand why this is the case. Thanks!

Code below:

//select change    
$('#modal-track').on('shown.bs.modal', function() {
  $('#track_type').change(function() {
    if ($('#track_type').val() == 'Source') {
      $('.mfnswitch').show();
    } else {
      $('.mfnswitch').hide();
    }
  });
});


//checkbox change
function valueChanged() {
  if (
    $('.checkboxinput').is(':checked') &&
    $('input[name=budget]').is(':hidden')
  ) {
    $('.hidden').show();
    $('.mfnhide').hide();
  } else if (!$('.checkboxinput').is(':checked') &&
    !$('input[name=budget]').is(':hidden')
  ) {
    $('.hidden').hide();
    $('.mfnhide').show();
  }
  if (!$('.checkboxinput').is(':checked') &&
    $('input[name=sync_budget]').is(':hidden')
  ) {
    $('.hidden').show();
    $('.mfnhide').hide();
  } else if (
    $('.checkboxinput').is(':checked') &&
    !$('input[name=sync_budget]').is(':hidden')
  ) {
    $('.hidden').hide();
    $('.mfnhide').show();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
  <div class="form-row ">
    <div class="col-md-3 mb-0">
      <div id="div_id_track_type" class="form-group">
        <label for="track_type" class=" requiredField">
                    Track type<span class="asteriskField">*</span> </label>
        <div class="">
          <select name="track_type" class="track_type select form-control" id="track_type">
            <option value="Source" selected="">Source</option>
            <option value="Library">Library</option>
            <option value="Original Composition">Original Composition</option>

          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row form-row">
    <div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
      <div class="custom-control custom-switch">
        <div class="form-group">
          <div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
                            MFN
                        </label> </div>
        </div>
      </div>

    </div>
    <div class="col-md-10 mb-0 mfnhide" id="mfnhide">
      <div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
                    Budget<span class="asteriskField">*</span> </label>
        <div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
      </div>
    </div>
    <div class="col-md-4 mb-0 hidden" id="hidden">
      <div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
                    Sync budget<span class="asteriskField">*</span> </label>
        <div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
      </div>
    </div>
    <div class="col-md-6 mb-0 hidden" id="hidden">
      <div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
                    Master budget<span class="asteriskField">*</span> </label>
        <div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
      </div>
    </div>
  </div>
  <div class="form-row ">
    <div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">

    </div>
  </div>
</form>