Change style of text field based on the selection of a combo box using 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

First, use onchange on cboSource.

Then:

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

Answer 2

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