我正在制作一个表单，并将输入字段设置为仅使用 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);
}
});
});
我想在只读时更改输入字段的颜色。
更新于 2020 年 7 月 22 日
方法一：
您可以使用 ：.css() http://api.jquery.com/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/>
方法二：
另一种简单的方法是使用 CSSclass :
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 的简单方法selector这样做。 ：
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/>
Refer : https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
