选择选项后禁用输入字段

时间:2016-09-16 06:41:31

标签: javascript php jquery performance codeigniter

_这是我的用户界面

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

  });
}

_这是我的剧本

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

_这就是我选择的选项

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

_这是我的输入文字字段

enter image description here _检查我的检查元素中的值

** _我不知道使用此代码会发生什么,如果选择了“群组代码”服务,则应禁用“审批者”文本字段,但是它会变为不起作用,有人会帮助我拜托:D **

3 个答案:

答案 0 :(得分:3)

textbox disabled属性取决于select change事件,因此onchange for textbox无用,因此请删除函数changeTextbox()。在选择更改事件的脚本中执行

$(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); 
    });
});

答案 1 :(得分:1)

更改选择时,请尝试使用此代码。

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

您也可以使用prop()

通过使用removeAttr(),你完全删除了disabled属性 - 而prop()只是将属性的底层布尔值设置为false。

$('#employee_id').prop("disabled", true);
$('#employee_id').prop("disabled", false);

答案 2 :(得分:0)

使用change attr

使用on disabled事件监听器
let opt = document.querySelector("select");
let input = document.querySelector("input");
opt.addEventListener("change",function(){

    input.disabled = true;

});

http://jsbin.com/mugina/1/edit?html,js,output