Question

45

Change Background color of input field using JavaScript

rated 0 times [ 49] [ 4] / answers: 1 / hits: 37936 / 10 Years ago, wed, october 15, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 10 Years ago cody · Accepted Answer

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