Enable input on select option id selected

Question

I need to enable input when one option from select is selected

I have this code:

<div class="col-4">
   <label>Stato</label>
   <select name="stato" id="stato" class="form-control">
      <option value="Registrato">Registrato</option>
      <option value="In Lavorazione">In Lavorazione</option>
      <option value="Pronto">Pronto</option>
      <option value="Consegnato">Consegnato</option>
   </select>
</div>

<div class="col-4">
   <label>Dati di consegna</label>
   <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>

I want to enable input when option "Consegnato" is selected. I try some jQuery code but doesn't seems work.

Thanks

score 0 · Answer 1 · answered Jun 23 '18 at 11:52

Fist check select value on onchange event, then toggle enable/disable input based on value:

<div class="col-4">
   <label>Stato</label>
   <select name="stato" id="stato" class="form-control" onchange="toggleInput();">
      <option value="Registrato">Registrato</option>
      <option value="In Lavorazione">In Lavorazione</option>
      <option value="Pronto">Pronto</option>
      <option value="Consegnato">Consegnato</option>
   </select>
</div>

<div class="col-4">
   <label>Dati di consegna</label>
   <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>

<script>
function toggleInput() {
   if ($('#stato :selected').val()=="Consegnato") {
       $('#data_consegna').prop('disabled', false);
   } else {
       $('#data_consegna').prop('disabled', true);
   }
}
</script>

Vishvadeep singh · Accepted Answer · 2018-06-23T12:11:26.460

Please use onchange event Demo

Js Code:

    $(function() {
 $('#data_consegna').prop('disabled', true);
    $('#stato').change(function(){
      if($(this).val() == "Consegnato") {
    $('#data_consegna').prop('disabled', false);
  } else {
       $('#data_consegna').prop('disabled', true);
   }
    });
});

Html Code:

<div class="col-4">
   <label>Stato</label>
   <select name="stato" id="stato" class="form-control" onchange="toggleInput();">
      <option value="Registrato">Registrato</option>
      <option value="In Lavorazione">In Lavorazione</option>
      <option value="Pronto">Pronto</option>
      <option value="Consegnato">Consegnato</option>
   </select>
</div>

<div class="col-4">
   <label>Dati di consegna</label>
   <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>

score 0 · Answer 3 · answered Jun 23 '18 at 12:00

Check my below snippet. In this on change of option of select box it will disable or enable input according to selected option condition.

$("#stato").change(function(){
  if($(this).val() == "Consegnato") {
    $('#data_consegna').prop('disabled', false);
  } else {
       $('#data_consegna').prop('disabled', true);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-4">
   <label>Stato</label>
   <select name="stato" id="stato" class="form-control">
      <option value="Registrato">Registrato</option>
      <option value="In Lavorazione">In Lavorazione</option>
      <option value="Pronto">Pronto</option>
      <option value="Consegnato">Consegnato</option>
   </select>
</div>

<div class="col-4">
   <label>Dati di consegna</label>
   <input id="data_consegna" type="text" class="form-control" name="data_consegna" disabled placeholder="Data Consegna" />
</div>

Ehsan · Answer 4 · 2018-06-23T12:30:05.207

Try This:

$('#stato').change(function(){

    var status = ( ($(this).val()) === 'Consegnato') ? false : true;

    $("#data_consegna").prop("disabled",status);

})

$(document).ready(function(){
  $('#stato').change(function(){
    var status = (($(this).val())==='Consegnato')?false:true;
    $("#data_consegna").prop("disabled",status);
  })
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-4">
   <label>Stato</label>
   <select name="stato" id="stato" class="form-control">
      <option value="Registrato">Registrato</option>
      <option value="In Lavorazione">In Lavorazione</option>
      <option value="Pronto">Pronto</option>
      <option value="Consegnato">Consegnato</option>
   </select>
</div>

<div class="col-4">
   <label>Dati di consegna</label>
   <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" disabled="disabled" />
</div>

score 0 · Answer 5 · answered Jun 23 '18 at 12:44

This should work:

<script>
    $(document).ready(function(){
        $("#stato").change(function() {
            console.log($( "#stato" ).val());
            if($( "#stato" ).val()==="Consegnato"){
                $("#data_consegna").removeAttr('disabled');
            } else{
                $("#data_consegna").attr('disabled','disabled');
            }
        });
    });
</script>

Check these resources to understand the different ways to deal with JQuery:

Disable Enable Input JQuery get a Selected Option

Enable input on select option id selected

5 Answers5