Some inputs disabled when checked option-CodePudding

Hello i would like to add function to my form when i select one option then some inputs of my form are disabled i tried to do this in jquery but something is not working.Could u help me wit this?

There is a example form:

<div >
   <label>Enabled </label>
   <select name="stato" id="stato" >
      <option value="Text1">Text1</option>
      <option value="Text2">Text2</option>
      <option value="Text3">Text3</option>
      <option value="Text4">Text4</option>
   </select>
</div>
 
<div  >
   <label>Disabled when choose option in select</label>
   <input id="data_consegna" type="text"  name="data_consegna" placeholder="Data Consegna" />
</div>

and function in jquery

$(function() {
  $('#data_consegna').prop('disabled', true);
  $('#stato option').each(function() {
    if ($(this).is('selected')) {
      $('#data_consegna').prop('enabled', true);
    } else {
      $('#data_consegna').prop('enabled', false);
    }
  });
});

CodePudding user response：

$(function() {
        //Triggering change event handler on element #stato
        $('#stato').change(function() {
            var value = $(this).val(); //Getting selected value from #stato
            if (value == "") {
                $('#data_consegna').prop('disabled', false); //If value is empty then disable another field
            } else {
                $('#data_consegna').prop('disabled', true); //Else enable another field
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div >
   <label>Enabled </label>
   <select name="stato" id="stato" >
        <option value="">Select One</option>
        <option value="Text1">Text1</option>
        <option value="Text2">Text2</option>
        <option value="Text3">Text3</option>
        <option value="Text4">Text4</option>
   </select>
</div>
 
<div  >
   <label>Disabled when choose option in select</label>
   <input id="data_consegna" type="text"  name="data_consegna" placeholder="Data Consegna" />
</div>

Please check above solution. It will enable input box at initial level. when you select one value, then it will disable input box.