Bootstrap is interfering with my change function of select

Question

I do have a trouble with Bootstrap. This is my code for my form; when something is selected, then another div according to this selected value appears. This works fine (https://jsfiddle.net/jtur4L1k/).

Script:

<script>
        $(function () {
    
            $('#typ_sifry').change(function () {
                $('.moznosti').hide();
                $('.moznosti *').attr("disabled", "disabled");
    
                $('#' + $(this).val()).show();
                $('#' + $(this).val() + ' *').removeAttr("disabled");
            });
    
            $('#typ_sifry').change();
        });
    </script>

Form:

<form action="#" method="post" id="text_k_zasifrovani">
  <ol>
      <li>
          <label for="typ_sifry">Zvolte typ šifry:</label>
          <select name="typ_sifry" id="typ_sifry">
              <option value="morseovka" <?php if ($typ_sifry == "morseovka") {echo "selected";} ?>>Morseovka</option>
              <option value="text_ob_pismena" <?php if ($typ_sifry == "text_ob_pismena") {echo "selected";} ?>>Text ob písmena</option>
          </select>
      </li>

      <!-- IF MORSEOVKA -->
      <div id="morseovka" class="moznosti" style="<?php if ($typ_sifry == "morseovka") {echo 'display:block;';} else {echo 'display:none;';} ?>">
          <li><label for="moznost1">Chcete jednodušší variantu, aby se nad písmeny zobrazovala diakritika?</label>
              <select name="moznost1" id="moznost1">
                  <option value="ne" <?php if ($moznost1 == 'ne') {echo "selected";} ?>>Ne</option>
                  <option value="ano" <?php if ($moznost1 == 'ano') {echo "selected";} ?>>Ano</option>
              </select>
          </li>
      </div>

      <!-- IF TEXT OB PÍSMENA -->
      <div id="text_ob_pismena" class="moznosti" style="<?php if ($typ_sifry == "text_ob_pismena") {echo 'display:block;';} else {echo 'display:none;';} ?>">
          <li><label for="moznost1">Zadejte, ob kolik písmen se má text zašifrovat:</label>
              <select name="moznost1" id="moznost1">
                  <option value="premistit_pismena" <?php if ($moznost1 == 'premistit_pismena') {echo "selected";} ?>>Zrcadlově přemístit písmena</option>
                  <option value="zrcadlove_prevratit" <?php if ($moznost1 == 'zrcadlove_prevratit') {echo "selected";} ?>>Zradlově otočit celý text</option>
              </select>
              
          </li>
          <li><label for="moznost2">Chcete jednodušší variantu, aby se písmena opakovala?</label>
              <select name="moznost2" id="moznost2">
                  <option value="ano" <?php if ($moznost2 == 'ano') {echo "selected";} ?>>Ano</option>
                  <option value="ne" <?php if ($moznost2 == 'ne') {echo "selected";} ?>>Ne</option>
              </select>
          </li>
      </div>

  </ol>
    <input type="submit" name="odeslat" value="Zašifruj text" class="btn btn-gray">
</form>

But when I loaded bootstrap, the change from the script above doesn't work anymore. What do I have to change in my code function, please?