Change background color of input field using JavaScript
I am making a form and entering a read-only input field using JavaScript. I want to change the default color for a 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/>
When someone clicks on a woman, the login with the id "age" and "phone" becomes read-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 an input field when it is read-only.
Simply use: . css ()
Sample: 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");
}
});
<h / "> Another easy way could be using the 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");
});
And another easy way to use CSS selector for this .: http://jsfiddle.net/dqgqjya5/3/
Just add this css :
input:disabled{
background-color:green;
}
Js
$("input[name='sex']").change(function() {
$("#age,#phone").attr("disabled", $(this).val() == "female");
});
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
$("#age").css('background-color', 'green');
OR
$(this).css('background-color', 'green');
You can try this:
$("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/>
Why don't you just use css?
Styling the inputs disabled in your css file and just disable them with js as you are doing right now ...
For example:
input[disabled] { background-color:#F00; }
As a newbie, this is my solution to change the background color of an input field. I'm not sure if this is the best practice, but I would like to share it with the experts here.
$("#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>