使用JavaScript更改输入字段的背景颜色 [英] Change Background color of input field using JavaScript

问题描述

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

I am making a form and making input field to read only using JavaScript. I want to change the default color for read only attribute to green or yellow.

HTML

<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

当有人点击女性时，ID为年龄和手机的输入将变为仅使用JavaScript阅读。

When someone click on female the input having Id's "age" and "phone" becomes reading only using 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);
    }
});
});

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

I want to change the color of input field when it is read only.

推荐答案

只需使用： .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 class ： 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

这篇关于使用JavaScript更改输入字段的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！