选择选项后禁用输入字段

Question

_this is my UI

<script>
    function changeTextbox()
    {
        $("#service_request").on("change", function(){
        if ($(this).val() == "Group Code")
        {
        $("#employee_id").attr("disabled","disabled");
        } else {
         $("#employee_id").removeAttr("disabled");
       }

  });
}

_that is my script

<select style="width:199px;border-radius:10px;" id="service_request" name="service_request" class="form-control" onchange="showUser(this.value)">

    <option value="Default Request" selected disabled>Default Request Service</option>
        <?php if(isset($records)): foreach($records as $row):?>
                <option value="<?php echo $row->service_group;?>"><?php echo $row->service_group;?></option>                                
            <?php endforeach;?>                     
            <?php else:?>
                <p>Request Service not available</p>
            <?php endif;?>

_this is how my select options goes

 <input style="border-radius:10px;width:425px;height:35px;" type="text" id="employee_id"  name="assign_to" onkeyup="autocomplet()" placeholder="Approver" onchange="changeTextbox()"/>

_this is for my input text field

_its the value in my inspect element

** _I don't know what's going on with this code, the Approver text field should be disabled, if the Group Code service is selected, but it turn's out to be not working, someone help me please :D**

Answer 1

The textbox disabled property is dependent on select change event so onchange for textbox is useless so remove the function changeTextbox() . In your script on select change event do

$(document).ready(function(){
   $('#service_request').on('change',function(){

    if($(this).val() == 'Group Code' )
        //$("#employee_id").attr("disabled", "disabled"); 
          $("#employee_id").prop("disabled", true); 
    else
        //$("#employee_id").removeAttr("disabled");
          $("#employee_id").prop("disabled", false); 
    });
});