Uncaught Typeerror: Cannot read Property 'length' of null

Question

I’m making the selection of employees, using the Select2.

Use of these inputs:

<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>

With this script:

$(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();
})

I have the problem "Uncaught Typeerror: Cannot read Property 'length' of null" on this line:

if($(this).val().length == 0) {

In this capacity:

$("#estabelecimento").on("change", function () {

A few weeks ago I am looking for if there is something wrong in Jquery, but the block is the same used above, changing only the ids. And I believe that because this mistake is happening, I’m not being able to make another adjustment. But I’m going in pieces.