Enable/Disable a dropdownbox in jquery
JqueryDrop Down-MenuJquery Problem Overview
I am new to jQuery and I want to enable and disable a dropdown list using a checkbox. This is my 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" />
What jQuery code do I need to do this? Also searching for a good jQuery documentation/study material.
Jquery Solutions
Solution 1 - Jquery
Here is one way that I hope is easy to understand:
$(document).ready(function() {
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", true);
} else {
$("#dropdown").prop("disabled", false);
}
});
});
Solution 2 - Jquery
I am using JQuery > 1.8 and this works for me...
$('#dropDownId').attr('disabled', true);
Solution 3 - Jquery
Try -
$('#chkdwn2').change(function(){
if($(this).is(':checked'))
$('#dropdown').removeAttr('disabled');
else
$('#dropdown').attr("disabled","disabled");
})
Solution 4 - Jquery
$("#chkdwn2").change(function(){
$("#dropdown").slideToggle();
});
Solution 5 - Jquery
To enable/disable -
$("#chkdwn2").change(function() {
if (this.checked) $("#dropdown").prop("disabled",true);
else $("#dropdown").prop("disabled",false);
})
Demo - http://jsfiddle.net/tTX6E/
Solution 6 - Jquery
try this
<script type="text/javascript">
$(document).ready(function () {
$("#chkdwn2").click(function () {
if (this.checked)
$('#dropdown').attr('disabled', 'disabled');
else
$('#dropdown').removeAttr('disabled');
});
});
</script>
Solution 7 - Jquery
A better solution without if-else:
$(document).ready(function() {
$("#chkdwn2").click(function() {
$("#dropdown").prop("disabled", this.checked);
});
});
Solution 8 - Jquery
$("#chkdwn2").change(function() {
if (this.checked) $("#dropdown").prop("disabled",'disabled');
})
Solution 9 - Jquery
$(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.
Solution 10 - Jquery
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);
}