The script requires jQuery
All works fine but I need to be able to change the color of the selected dropdown when it is selected by the option box, to (bright green). And greyed out again if the other option is chosen.
I have tried all the suggested tips I read up on i.e. $( "#mOptions" ).prop (.css('background-color','#ffffff')); any color. please help and many thanks. Did not work
The script
$(document).ready(function(){
$('input[name="gender"]').click(function() {
if($('input[name="gender"]').is(':checked')) {
var radioValue = $("input[name='gender']:checked").val();
if(radioValue == "m"){
$( "#mOptions" ).prop( "disabled", false );
$( "#fOptions" ).prop( "disabled", true );
} else {
$( "#mOptions" ).prop( "disabled", true );
$( "#fOptions" ).prop( "disabled", false );
}
}
});
});
The Form:
<input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female
<br />
<select id="mOptions" disabled="true">
<option>Select</option>
<option value="1">Shirt</option>
<option value="2">Pant</option>
<option value="3">dhoti</option>
</select>
<select id="fOptions" disabled="true">
<option>Select</option>
<option value="4">Saree</option>
<option value="5">Bangle</option>
<option value="6">handbag</option>
</select>
The script requires jQuery
All works fine but I need to be able to change the color of the selected dropdown when it is selected by the option box, to (bright green). And greyed out again if the other option is chosen.
I have tried all the suggested tips I read up on i.e. $( "#mOptions" ).prop (.css('background-color','#ffffff')); any color. please help and many thanks. Did not work
The script
$(document).ready(function(){
$('input[name="gender"]').click(function() {
if($('input[name="gender"]').is(':checked')) {
var radioValue = $("input[name='gender']:checked").val();
if(radioValue == "m"){
$( "#mOptions" ).prop( "disabled", false );
$( "#fOptions" ).prop( "disabled", true );
} else {
$( "#mOptions" ).prop( "disabled", true );
$( "#fOptions" ).prop( "disabled", false );
}
}
});
});
The Form:
<input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female
<br />
<select id="mOptions" disabled="true">
<option>Select</option>
<option value="1">Shirt</option>
<option value="2">Pant</option>
<option value="3">dhoti</option>
</select>
<select id="fOptions" disabled="true">
<option>Select</option>
<option value="4">Saree</option>
<option value="5">Bangle</option>
<option value="6">handbag</option>
</select>
Share
Improve this question
edited Mar 30, 2015 at 20:58
user94559
60.2k6 gold badges107 silver badges107 bronze badges
asked Mar 30, 2015 at 19:15
Victor VictoriaVictor Victoria
611 silver badge7 bronze badges
2 Answers
Reset to default 5You can chain a css
method to the prop
method like this:
$('input[name="gender"]').click(function() {
if($('input[name="gender"]').is(':checked')) {
var radioValue = $("input[name='gender']:checked").val();
if(radioValue == "m"){
$( "#mOptions" ).prop( "disabled", false ).css('background-color', 'lightgreen');
$( "#fOptions" ).prop( "disabled", true ).css('background-color', '');
} else {
$( "#mOptions" ).prop( "disabled", true ).css('background-color', '');
$( "#fOptions" ).prop( "disabled", false ).css('background-color', 'lightgreen');;
}
}
});
You may also consider resetting the value of the other drop-down to "Selected," so you don't end up with a disabled drop-down that has a value. You can do so like this:
$( "#fOptions" ).prop( "disabled", true ).css('background-color', '').val('Select');
For more user-friendliness, consider wrapping your inputs with a label:
<label><input type="radio" name="gender" value="m" />Male</label>
That allows your users to click the word "Male" in addition to selecting the tiny radio button.
Fiddle
You can simplify the logic a bit.
Once you've clicked a radio button, at least one of the buttons is checked, and there's no way to uncheck both of them. Therefore, this test is not needed:
if($('input[name="gender"]').is(':checked'))
Also, the select
box to enable can be queried directly like this:
select= $('#'+$(this).val()+'Options');
You simply need to enable that select
box and disable the other.
Updated Code:
$('input[name="gender"]').click(function() {
var value= $(this).val(),
select= $('#'+value+'Options');
select
.prop('disabled', false)
.css('background-color', 'lightgreen');
$('#mOptions, #fOptions')
.not(select)
.prop('disabled', true)
.css('background-color', '')
.val('Select');
});
New Fiddle
jsfiddle solution
You can set the background colour of the select
element like so:
$('#mOptions').css('background-color', '#0f0');
Or, as discussed here, you can set the background colour of the option
elements:
$('#mOptions option').css('background-color', '#0f0');