1

Preciso Deixar desabilitado o campo "ultimoDiaTrab" e só habilita-lo, quando no Select for selecionado "PARCIALMENTETRABALHADO" opção Nº2.

<div class="form-group" style=" margin: 0 auto;">

    <div class="col-sm-4">
        <label for="avisoPrevio" class="control-label">Avisio Prévio:</label>
        <select class="form-control" name="avisoPrevio" id="avisoPrevio">
            <option id="avisoPrevio" name="TRABALHADO" value="TRABALHADO">Trabalhado</option>
            <option id="avisoPrevio" name="INDENIZADO" value="INDENIZADO">Indenizado</option>
            <option id="avisoPrevio" name="PARCIALMENTETRABALHADO" value="PARCIALMENTETRABALHADO">Parcialmente Trabalhado</option>
            <option id="avisoPrevio" name="TOTALMENTETRABALHADO" value="TOTALMENTETRABALHADO">Totalmente Trabalhado</option>
        </select>
    </div>
    <div class="col-sm-4" id="ultimoDiaTrab">
        <label for="ultimoDiaTrab" class="control-label">Último dia a ser trabalhado:</label>
        <input type="date" id="ultimoDiaTrab" name="ultimoDiaTrab" class="form-control" />
    </div>

</div>

3 Respostas 3

2

Existem duas coisas que precisam ser feitas para que funcione corretamente. A primeira delas é remover o id="ultimoDiaTrab" da div onde se encontra o campo data e colocar o campo ultimoDiaTrab como disabled por default. Onde estava:

<div class="col-sm-4" id="ultimoDiaTrab">
    <label for="ultimoDiaTrab" class="control-label">Último dia a ser trabalhado:</label>
    <input type="date" id="ultimoDiaTrab" name="ultimoDiaTrab" class="form-control" />
 </div>

Deve ficar:

<div class="col-sm-4">
    <label for="ultimoDiaTrab" class="control-label">Último dia a ser trabalhado:</label>
    <input type="date" id="ultimoDiaTrab" name="ultimoDiaTrab" class="form-control" disabled/>
</div>

A segunda coisa a ser feita é adicionar um EventListener via Javascript, para quando o valor do select for alterado verificar se o campo data deve ser ativado ou desativado:

<script>
      document.getElementById('avisoPrevio').addEventListener('change', habilitarData, true);
      function habilitarData(e) {
        e.preventDefault();
        e.stopPropagation();
        var campoData = document.getElementById('ultimoDiaTrab');
        console.log(campoData);
        if (e.currentTarget.value === 'PARCIALMENTETRABALHADO') {
          campoData.disabled = false;
        } else {
          campoData.disabled = true;
        }
      }
</script>
1
  • Lucas, Obrigada!! Funcionou Perfeitamente!! Commented 14/03/2017 às 13:31
2

Repara que

<div class="col-sm-4" id="ultimoDiaTrab">

tem o mesmo ID que o teu input

<input type="date" id="ultimoDiaTrab" name="ultimoDiaTrab" class="form-control" />

Iso é HTML inválido e gera bugs dificeis de detetar...

Solução, usando outro seletor que não o ID:

var select = document.getElementById('avisoPrevio');
var ultimoDiaTrab = document.querySelector('input[type="date"][name="ultimoDiaTrab"]');
select.addEventListener('change', function() {
  ultimoDiaTrab.disabled = this.value != 'PARCIALMENTETRABALHADO';
});
<div class="col-sm-4">
  <label for="avisoPrevio" class="control-label">Avisio Prévio:</label>
  <select class="form-control" name="avisoPrevio" id="avisoPrevio">
            <option id="avisoPrevio" name="TRABALHADO" value="TRABALHADO">Trabalhado</option>
            <option id="avisoPrevio" name="INDENIZADO" value="INDENIZADO">Indenizado</option>
            <option id="avisoPrevio" name="PARCIALMENTETRABALHADO" value="PARCIALMENTETRABALHADO">Parcialmente Trabalhado</option>
            <option id="avisoPrevio" name="TOTALMENTETRABALHADO" value="TOTALMENTETRABALHADO">Totalmente Trabalhado</option>
    </select>
</div>

<div class="col-sm-4" id="ultimoDiaTrab">
  <label for="ultimoDiaTrab" class="control-label">Último dia a ser trabalhado:</label>
  <input type="date" id="ultimoDiaTrab" name="ultimoDiaTrab" class="form-control" disabled="disabled" />
</div>

0

Como o amigo Sergio disse, cuidado com Ids iguais.

$('#avisoPrevio').change(function(){
if($(this).val() == "PARCIALMENTETRABALHADO"){
$('#ultimoDiaTrabalho').prop("disabled", false);
}else{
$('#ultimoDiaTrabalho').prop("disabled", true);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style=" margin: 0 auto;">

    <div class="col-sm-4">
        <label for="avisoPrevio" class="control-label">Avisio Prévio:</label>
        <select class="form-control" name="avisoPrevio" id="avisoPrevio">
            <option id="avisoPrevio" name="TRABALHADO" value="TRABALHADO">Trabalhado</option>
            <option id="avisoPrevio" name="INDENIZADO" value="INDENIZADO">Indenizado</option>
            <option id="avisoPrevio" name="PARCIALMENTETRABALHADO" value="PARCIALMENTETRABALHADO">Parcialmente Trabalhado</option>
            <option id="avisoPrevio" name="TOTALMENTETRABALHADO" value="TOTALMENTETRABALHADO">Totalmente Trabalhado</option>
        </select>
    </div>
    <div class="col-sm-4" id="divUltimoDiaTrab">
        <label for="ultimoDiaTrab" class="control-label">Último dia a ser trabalhado:</label>
        <input type="date" id="ultimoDiaTrabalho" name="ultimoDiaTrab" class="form-control"disabled="disabled" />
    </div>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .