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

Question

我正在制作一个表单并使输入字段只能使用 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);
    }
});
});

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

Answer 1

---

2020 年 7 月 22 日更新

---

方法一：

您可以使用： .css()

$("#age,#phone").css("background-color","#0F0");

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.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/>

---

方法二：

另一种简单的方法是使用 CSS类：

JS：

$("#age,#phone").addClass("green");

CSS：

.green { background-color:#0F0;}

 $("input[name='sex']").change(function() { var isOptional = $(this).val() == "female"; $("#age,#phone").attr("disabled", isOptional) if(isOptional) $("#age,#phone").addClass("green"); else $("#age,#phone").removeClass("green"); });

 .green{ background-color:#0F0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.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/>

---

方法三：

还有另一种使用 CSS选择器的简单方法。 ：

JS：

$("#age,#phone").attr("disabled", true);

CSS：

input:disabled { background-color:#0F0;}

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

 input:disabled { background-color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.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/>

参考： 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"); } });

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="formulier"> <form> <div class="form-group row"> <label class="col-md-2">Name: </label> <div class="col-md-6"> <input type="text" class="col-md-6" id="name" /> </div> </div> </form> </div>