Изменить стиль текстового поля на основе выбора поля со списком с помощью Javascript

Question

Я хотел бы изменить стиль текстового поля на основе значения, выбранного в поле со списком. В частности, я хотел бы сделать поле txtDepartment серым и помечено как «только для чтения», если значение параметра, выбранное в cboSource, равно 1. Я пробовал код ниже, но я полагаю, что мой код стиля по крайней мере ошибочен , если не другие вещи. Любая помощь оценивается. Благодаря!

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

с JQuery вся ваша функция получает намного меньше:

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

Answer 2

Во-первых, используйте onchange on cboSource.

Тогда:

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

Answer 3

Установите атрибут disabled для элемента

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

// off 
txtDepartment.removeAttribute("disabled") 

Answer 4

возможно решение с использованием 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

На мой взгляд OnClick больше подходит, как на изменение имеет различное значение для другого браузера

Тест

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