Uncaught Error TypeError: Can not read property 'length' of null

<div class="form-group">
  <div class="row">
    <div class="col-md-12">
      <label>Destino</label>
    </div>
  </div>

  <div class="form-group">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <select name="grupo" id="grupo" class="form-control"></select>
          <label for="grupo" generated="true" class="error" style="display: none;">Selecione o grupo</label>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <select name="estabelecimento" id="estabelecimento" class="form-control"></select>
          <label for="estabelecimento" generated="true" class="error" style="display: none;">Selecione o estabelecimento</label>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group">
          <select name="funcionario[]" id="funcionario" class="form-control" multiple></select>
          <label for="funcionario" generated="true" class="error" style="display: none;">Selecione o usuário</label>
        </div>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  /*************** Procurar grupo ***************/
  $("#grupo").select2({
    placeholder: "Grupo",
    ajax: {
      url: "<?php echo $dir_base; ?>php/procurar_grupo.php",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term // search term
        };
      },

      processResults: function(data) {
        // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data
        return {
          results: data
        };
      },
      cache: true
    }
  });

  $("#estabelecimento").prop("disabled", true);

  $("#grupo").on("change", function() {
    if ($(this).val().length == 0) {
      $("#estabelecimento").prop("disabled", true);
    } else {
      $("#estabelecimento").prop("disabled", false);
    }

    $("#estabelecimento").empty().trigger('change');
  });
  /*************** Procurar grupo ***************/

  /*************** Procurar estabelecimento ***************/
  $("#estabelecimento").select2({
    placeholder: "Estabelecimento",
    ajax: {
      url: "<?php echo $dir_base; ?>php/procurar_estabelecimento.php",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          grupo_id: $("#grupo").val(),
          q: params.term // search term
        };
      },
      processResults: function(data) {
        // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data
        return {
          results: data
        };
      },
      cache: true
    }
  });

  $("#funcionario").prop("disabled", true);

  $("#estabelecimento").on("change", function() {
    if ($(this).val().length == 0) {
      $("#funcionario").prop("disabled", true);
    } else {
      $("#funcionario").prop("disabled", false);
    }

    $("#funcionario").empty().trigger('change')
  });
  /*************** Procurar estabelecimento ***************/

  /*************** Procurar funcionário ***************/
  $("#funcionario").select2({
    placeholder: "Usuários",
    ajax: {
      url: "<?php echo $dir_base; ?>php/procurar_funcionarios.php",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          estabelecimento_id: $("#estabelecimento").val(),
          q: params.term // search term
        };
      },
      processResults: function(data) {
        // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data
        return {
          results: data
        };
      },
      cache: true
    }
  });
  /*************** Procurar funcionário ***************/

  $('#tipo_documento').select2();
})