Question

从select中选择一个选项时，我需要启用输入

我有此代码：

<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

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

Answer 2

请使用onchange事件Demo

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 3

检查下面的代码段。在此选择框的选项更改中，它将根据所选选项条件禁用或启用输入。

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

尝试一下：

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

这应该有效：

<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的不同方法：

Disable Enable Input JQuery get a Selected Option

在选择的选择ID上启用输入

5 个答案: