Change Background color of input field using JavaScript

Question

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

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.

How to change the color back to white when it it clicked male — Muhammad Rizwan
– Muhammad Rizwan, Commented Oct 15, 2014 at 19:49

hityagi · Accepted Answer · 2020-07-22 20:15:21Z

UPDATED 22 Jul 2020

Method 1:

You can use : .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/>

Method 2:

Another simple way can be using CSS class :

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

Method 3:

And there is yet another simple way using CSS selector to do so. :

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

Levi Beckman · Accepted Answer · 2014-10-15 19:44:26Z

1

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

OR

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

answered Oct 15, 2014 at 19:44

Levi Beckman

5333 silver badges8 bronze badges

Comments

user2019037 · Accepted Answer · 2014-10-15 19:47:05Z

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

jonyjm · Accepted Answer · 2014-10-15 19:57:46Z

0

Why dont you use just css?

Define a style for inputs disabled in your css file, and just disable them with js like you are doing right now...

For example:

input[disabled] { background-color:#F00; }

answered Oct 15, 2014 at 19:57

jonyjm

9832 gold badges7 silver badges15 bronze badges

Comments

Sergio · Accepted Answer · 2017-11-03 10:11:08Z

As a beginner this is my solution for changing the background color of an input field. I am 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>

Collectives™ on Stack Overflow

Change Background color of input field using JavaScript

5 Answers 5

UPDATED 22 Jul 2020

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

UPDATED 22 Jul 2020

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related