Disable DATE Input After selecting Select option

Asked

Viewed 484 times

1

I need to leave disabled the field "ultimoDiaTrab" and only enable it, when on Select is selected "PARTIALLY worked" option #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>
javascript html-select

3 answers

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

2


There are two things that need to be done to make it work properly. The first is to remove the id="ultimoDiaTrab" from the div where the date field is located and place the field ultimoDiaTrab as disabled by default. Where 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 stay:

<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 be done is to add a Eventlistener via Javascript, for when the select value 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>

  • Lucas, thank you!! It worked perfectly!!

0

As friend Sergio said, beware of equal 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>
<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>

Browser other questions tagged javascript html-select

You are not signed in. Login or sign up in order to post.