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

我想根据组合框中选择的值更改文本字段的样式。具体来说，如果在cboSource中选择的选项值为1，我要做的是将txtDepartment字段置为灰色并标记为“只读”。我试过下面的代码，但我想我的风格代码至少是错误的，如果不是其他的话。谢谢你的帮助。谢谢

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

资料来源1
资料来源2

职能部门（obj）
{
var selectedValue=obj.value；
var txtDepartment=document.getElementById（“txtDepartment”）；
如果（selectedValue==“1”）
{
txtDepartment.style.display=“Disabled style='background-color:#E8E8E8'；
}
}

首先，在cboSource上使用onchange

然后：

使用jQuery，您的整个函数变得更小：

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

---

为元素设置禁用的

属性

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

// off
txtDepartment.removeAttribute("disabled")

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


.残疾人士{
背景色：#E8E8E8；
}
$（文档）.ready（函数（）{
var txtDepartment=$（“txtDepartment”）；
var cboSource=$（“#cboSource”）；
cboSource.change（函数（）{
txtDepartment.removeClass（）.removeAttr（“已禁用”）；
如果（cboSource.val（）==1）{
txtDepartment.addClass（“disabled”）.attr（“disabled”，true）；
}
});
});
选择
资料来源1
资料来源2

在我看来，onclick更合适，因为on change对于不同的浏览器有不同的含义

试试这个

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


资料来源1
资料来源2

职能部门（obj）
{
var txtDepartment=document.getElementById（“txtDepartment”）；
txtDepartment.disabled=false；
txtDepartment.style=“”；
如果（对象值=“1”）
{
txtDepartment.style=“背景色：#E8E8E8”；
txtDepartment.disabled=true；
}
}
在进一步研究之前，我建议您使用诸如
jQuery
之类的库来处理DOM/JS需求。这样的事情就变得“琐碎”了。上面的工作非常完美，谢谢！我也感谢JQuery的建议；我会把这段代码放在手边，等我有时间的时候给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>

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