使用JavaScript更改输入字段的背景颜色

我正在创建一个表单并使输入字段只能使用JavaScript进行读取。 我想将只读属性的默认颜色更改为绿色或黄色。

HTML

Male
 Female 
 Age: Hobbies:
 Phone:
 

当有人点击女性时，具有Id“年龄”和“电话”的输入仅使用JavaScript进行阅读。

JS

 $(function() { $("input[name='sex']").change(function() { if($(this).val() == "female") { $("#age").attr("disabled", true); style="backgroundcolor=green" $("#phone").attr("disabled", true); } else if($(this).val() == "male") { $("#age").attr("disabled", false); $("#phone").attr("disabled", false); } }); }); 

我想在只读时更改输入字段的颜色。

Answer 1

只需使用： .css（）

示例： http ： //jsfiddle.net/cL7ngmda/

 $("input[name='sex']").change(function() { if($(this).val() == "female") { $("#age,#phone").attr("disabled", true).css("background-color","#0F0"); } else if($(this).val() == "male") { $("#age,#phone").attr("disabled", false).css("background-color","#FFF"); } }); 

---

另一个简单的方法是使用CSS 类 ： http ： //jsfiddle.net/e83s7s80/7/

CSS

 .bg-green{ background-color:green; } 

JS

 $("input[name='sex']").change(function() { $("#age,#phone").attr("disabled", $(this).val() == "female").toggleClass("bg-green"); }); 

---

还有另一种使用CSS 选择器的简单方法。 ： http ： //jsfiddle.net/dqgqjya5/3/

只需添加此css ：

 input:disabled{ background-color:green; } 

JS

 $("input[name='sex']").change(function() { $("#age,#phone").attr("disabled", $(this).val() == "female"); }); 

参考： https ： //developer.mozilla.org/en-US/docs/Web/CSS/ : disabled

Answer 2

 $("#age").css('background-color', 'green'); 

要么

 $(this).css('background-color', 'green'); 

Answer 3

你可以试试这个：

 $("input[name='sex']").change(function () { if ($(this).val() == "female") { $("#age").attr("disabled", true); $("#age, #hobbies, #phone").css("background-color", "green"); $("#phone").attr("disabled", true); } else if ($(this).val() == "male") { $("#age").attr("disabled", false); $("#phone").attr("disabled", false); $("#age, #hobbies, #phone").css("background-color", "white"); } }); 

  Male 
 Female 
Age: Hobbies:  
Phone:  
 

Answer 4

你为什么不用css？

在css文件中定义禁用输入的样式，并使用js禁用它们，就像你现在正在做的那样……

例如：

 input[disabled] { background-color:#F00; } 

Answer 5

作为初学者，这是我改变输入字段背景颜色的解决方案。 我不确定这是否是最佳做法，但我想与专家分享。

  $("#name").focusin(function() { $(this).addClass("green"); }); $("#name").blur(function() { $(this).removeClass("green"); if (!$(this).val()) { $(this).addClass("warning"); } else { $(this).removeClass("warning"); $(this).addClass("green"); } }); 

 .warning { background-color: red; color: white; } .green { background-color: rgba(144, 238, 144, 1); } 

  
 
 
 Name: