在 jquery 中启用/禁用下拉框

我是 jQuery 的新手,我想使用一个复选框来启用和禁用一个下拉列表。这是我的 html:

<select id="dropdown" style="width:200px">
<option value="feedback" name="aft_qst">After Quest</option>
<option value="feedback" name="aft_exm">After Exam</option>
</select>
<input type="checkbox" id="chkdwn2" value="feedback" />

我需要什么样的 jQuery 代码来完成这项工作? 还要搜索一些好的 jQuery 文档/学习资料。

289885 次浏览
$("#chkdwn2").change(function(){
$("#dropdown").slideToggle();
});

JsFiddle

Here is one way that I hope is easy to understand:

http://jsfiddle.net/tft4t/

$(document).ready(function() {
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", true);
} else {
$("#dropdown").prop("disabled", false);
}
});
});

Try -

$('#chkdwn2').change(function(){
if($(this).is(':checked'))
$('#dropdown').removeAttr('disabled');
else
$('#dropdown').attr("disabled","disabled");
})

try this

 <script type="text/javascript">
$(document).ready(function () {
$("#chkdwn2").click(function () {
if (this.checked)
$('#dropdown').attr('disabled', 'disabled');
else
$('#dropdown').removeAttr('disabled');
});
});
</script>

To enable/disable -

$("#chkdwn2").change(function() {
if (this.checked) $("#dropdown").prop("disabled",true);
else $("#dropdown").prop("disabled",false);
})

Demo - http://jsfiddle.net/tTX6E/

$("#chkdwn2").change(function() {
if (this.checked) $("#dropdown").prop("disabled",'disabled');
})
$(document).ready(function() {
$('#chkdwn2').click(function() {
if ($('#chkdwn2').prop('checked')) {
$('#dropdown').prop('disabled', true);
} else {
$('#dropdown').prop('disabled', false);
}
});
});

making use of .prop in the if statement.

I am using JQuery > 1.8 and this works for me...

$('#dropDownId').attr('disabled', true);

A better solution without if-else:

$(document).ready(function() {
$("#chkdwn2").click(function() {
$("#dropdown").prop("disabled", this.checked);
});
});

this is to disable dropdown2 , dropdown 3 if you select the option from dropdown1 that has the value 15

$("#dropdown1").change(function(){
if ( $(this).val()!= "15" ) {
$("#dropdown2").attr("disabled",true);
$("#dropdown13").attr("disabled",true);


}

Your Selector should be either name of select, id (#) or class (.),

This is if you want to disable:

$("#your-selector").prop("disabled", true);

This is if you want to enable:

$("#your-selector").prop("disabled", false);