Разрешить ввод при выборе идентификатора опции

Question

Мне нужно включить ввод, когда выбран один вариант из выбора

У меня есть этот код:

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

Я хочу включить ввод, когда выбрана опция "Consegnato".Я пробую код jQuery, но, похоже, не работает.

Спасибо

Answer 1

Это должно работать:

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

Проверьте эти ресурсы, чтобы понять различные способы работы с JQuery:

Отключить Включить вход JQuery получает выбранный вариант

Answer 2

Попробуйте:

$('#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>

Answer 3

Пожалуйста, используйте onchange событие Демо

Js Код:

    $(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-код:

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

Answer 4

Проверьте мой ниже фрагмент.При этом при изменении опции окна выбора он будет отключать или разрешать ввод в соответствии с выбранным условием опции.

$("#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>

Answer 5

Fist check выберите значение для события onchange, затем включите / выключите вход на основе значения:

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