脚本需要jQuery
所有操作都很好,但当选项框选中所选下拉列表时,我需要能够将其颜色更改为(亮绿色)。如果选择了其他选项,则会再次变灰。
我已经尝试了我读到的所有建议技巧,即。$("#mOptions").prop(.css('background-color','#ffffff'));任何颜色。请帮忙,非常感谢。不工作
脚本
$(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 );
}
}
});
});
形式:
<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>
您可以将css
方法链接到prop
方法,如下所示:
$('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');;
}
}
});
您还可以考虑将other下拉列表的值重置为"Selected",这样您就不会出现有值的禁用下拉列表。你可以这样做:
$( "#fOptions" ).prop( "disabled", true ).css('background-color', '').val('Select');
为了更方便用户,可以考虑使用标签包装输入:
<label><input type="radio" name="gender" value="m" />Male</label>
这让你的用户除了选择小单选按钮外,还可以点击"男性"一词。
Fiddle
你可以稍微简化一下逻辑。
单击单选按钮后,至少会选中其中一个按钮,并且无法同时取消选中这两个按钮。因此,不需要此测试:
if($('input[name="gender"]').is(':checked'))
此外,要启用的select
框可以直接查询如下:
select= $('#'+$(this).val()+'Options');
您只需启用select
框并禁用另一个即可。
更新代码:
$('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');
});
新Fiddle
jsfiddle解决方案
您可以设置select
元素的背景颜色,如下所示:
$('#mOptions').css('background-color', '#0f0');
或者,如本文所述,您可以设置option
元素的背景颜色:
$('#mOptions option').css('background-color', '#0f0');