Изменить цвет фона поля ввода с использованием 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/> 

Когда кто-то нажмите на женский вход, имеющий идентификаторам «возраст» и «телефон» становится только чтение с помощью 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

Просто используйте: .css()

Примеры: 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"); 
    } 
}); 

---

Другой простой способ можно использовать CSS класс: 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"); 
}); 

---

И есть еще один простой способ, с помощью CSS селектор, чтобы сделать это. : http://jsfiddle.net/dqgqjya5/3/

Просто добавьте этот CSS:

input:disabled{ 
    background-color:green; 
} 

Js

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

См: 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>