Disable Input of type DATE After selecting Select option

Navigation
1

I need to leave the field "ultimoDiaTrab" disabled and only enable it, when Select is selected "PARTIALMENTETRABALHADO" option 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>
    
asked by anonymous 14.03.2017 / 14:03

3 answers

2

There are two things that need to be done to work properly. The first one is to remove id="ultimoDiaTrab" from the div where the date field is located and set the ultimoDiaTrab field to disabled by default. Where I was: 

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

Should be: 

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

The second thing to do is to add an EventListener via Javascript, so when the value of the select is changed check whether the date field should be enabled or disabled: 

<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>
    
14.03.2017 / 14:24
2

Notice that 

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

has the same ID as your input 

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

Iso is invalid HTML and generates hard-to-detect bugs ...

Solution using another selector other than 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>
    
14.03.2017 / 14:19
0

As your friend Sergio said, beware of identical Ids. 

$('#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><divclass="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>
    
14.03.2017 / 14:37
How to change the app.config file at run time? Uncaught TypeError: Can not read property 'split' of undefined