setting select to defaul value after checkbox = false

I am trying to create a switcher (checkbox). When checkbox is selected a select is shown otherwise its hidden. Show/hide of dropdown based on switcher works ok. Now i need to do when i disable a switcher, for select to go to default option (selected option). So indexof(0) bassicly. I have tried number of options and also tried it online on http://jsfiddle.net and there all works fine but in my code it doesnt. Its selects the correct value, i can see that when i click dropdown the value is selecter (marked blue, css): here is the image for example when i setted

   okpSelect.selectedIndex = 3;

enter image description here

My switcher (checkbox):

  <label class="toggle-inline">
    <input class="toggle-custom" id="okpswitch" name="input-group-toggle" value="toggle-1" type="checkbox" checked>test1
   </label>

My select dropdown

<div style="display: block" id="selectOKP">
  <select class="form-control select-filter" data-minimum-results-for-search="Infinity" id="prijava_okp">
       <option value="" selected>Online klinični primeri </option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
  </select>
</div>

So first i tried setting it to 0 when i hide the div. Here is the code: Attempt01:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript"> 
    $(document).ready(function () {
        $('#okpswitch').change(function () {
            var okpSelect  =  document.getElementById('prijava_okp');
            if (!this.checked){
                //  ^
                $('#selectOKP').fadeOut('slow');
                okpSelect.selectedIndex = 0;
                }
            else  {
              okpSelect.selectedIndex = 0;
                $('#selectOKP').fadeIn('slow');
            }
        });
    });
</script>

Funny part here is that when i disable/enable the checkbox the correct value is selected (it is marked with my color blue), but the text in my dropdown/select doesnt change? I cannot figure it out why.

Attempt02, i also tried with this function, same result. The correct value is selected but text in box its still the same.

 <!-- <script language="javascript">  
      var okpCheckbox  =  document.getElementById('okpswitch');
      var okpSelect  =  document.getElementById('prijava_okp');
      okpCheckbox.addEventListener("click", function(e){
        if (this.checked){
          okpSelect.disabled = false;     
        } else {
          okpSelect.selectedIndex = 0;
          okpSelect.disabled = true;     
        }
      });
    </script>