使用Javascript选择组合框，更改文本字段的样式

Question

I would like to change the style of a text field based on the value selected in a combo box. Specifically, what I'd like to do is make the txtDepartment field gray and marked as "read only" if the option value selected in cboSource is 1. I've tried the code below, but I imagine my style code at least is wrong, if not other things. Any help appreciated. Thanks!

<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
    <option value = 1>Source 1</option>
    <option value = 2>Source 2</option>
</select>

<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

<script>
function displayDepartment(obj)
{
    var selectedValue = obj.value;
    var txtDepartment = document.getElementById("txtDepartment");


    if (selectedValue == "1") 
    {
        txtDepartment.style.display = "Disabled style='background-color:#E8E8E8'";

    }
}
</script>

Answer 1

txtDepartment.style.backgroundColor = "#E8E8E8";

txtDepartment.disabled = 'disabled';

with jQuery your whole function gets a lot smaller:

function displayDepartment(obj)
{
    if($(obj).value=="1") {
        $("#txtDepartment").css('background-color','#E8E8E8');
        $("#txtDepartment").disabled ='disabled'
     }
}

Answer 2

First, use onchange on cboSource.

Then:

if(selectedValue == "1")
    txtDepartment.disabled = 'disabled';

Answer 3

Set the disabled attribute for your element

// on
txtDepartment.setAttribute("disabled","disabled")

// off
txtDepartment.removeAttribute("disabled")

Answer 4

possible solution using jQuery:

<style>
  .disabled { 
    background-color:#E8E8E8;
  }
</style>

<script language="javascript">

    $(document).ready(function() {
        var txtDepartment = $("#txtDepartment");
        var cboSource = $("#cboSource");

        cboSource.change(function() {
            txtDepartment.removeClass().removeAttr("disabled"); 
            if (cboSource.val() == 1) {
                txtDepartment.addClass("disabled").attr("disabled", true); 
            }
        });
    });

</script>

<select name="cboSource" id="cboSource">
    <option value = 0>Choose</option>
    <option value = 1>Source 1</option>
    <option value = 2>Source 2</option>
</select>

<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

Answer 5

In my opinion onclick is more suitable as on change has different meaning for different browser

Try this

<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
    <option value = 1>Source 1</option>
    <option value = 2>Source 2</option>
</select>

<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

    <script>
    function displayDepartment(obj)

    {
        var txtDepartment = document.getElementById("txtDepartment");  
        txtDepartment.disabled = false;  
        txtDepartment.style = "";
        if (obj.value == "1") 
        {
            txtDepartment.style = "background-color:#E8E8E8";
            txtDepartment.disabled = true;  
        }
    }

</script>