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

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

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进行阅读。

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);
    }
});
});

当我只想读取输入字段时，我想改变其颜色。

---

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

---

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

要么

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

---

你可以试试这个：

$("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");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/>

链接地址: http://www.djcxy.com/p/70511.html

上一篇: Change Background color of input field using JavaScript

下一篇: Changing color of text background based on conditional statement