选择选项后禁用输入字段
_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**
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);
});
});
Try this code, when you change the select.
$(document).on("change","#service_request", function(){
if ($(this).val() == "Group Code")
{
$("#employee_id").attr("disabled","disabled");
}
else
{
$("#employee_id").removeAttr('disabled');
}
}
You can also use prop()
By using removeAttr(), you are completely removing the disabled attribute itself - while prop() is merely setting the property's underlying boolean value to false.
$('#employee_id').prop("disabled", true);
$('#employee_id').prop("disabled", false);
Just use the on change event listener the using the disabled attr
let opt = document.querySelector("select");
let input = document.querySelector("input");
opt.addEventListener("change",function(){
input.disabled = true;
});