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.
This question is related to
jquery
drop-down-menu
To enable/disable -
$("#chkdwn2").change(function() {
if (this.checked) $("#dropdown").prop("disabled",true);
else $("#dropdown").prop("disabled",false);
})
Demo - http://jsfiddle.net/tTX6E/
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);
}
$(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.
$("#chkdwn2").change(function() {
if (this.checked) $("#dropdown").prop("disabled",'disabled');
})
I am using JQuery > 1.8 and this works for me...
$('#dropDownId').attr('disabled', true);
$("#chkdwn2").change(function(){
$("#dropdown").slideToggle();
});
try this
<script type="text/javascript">
$(document).ready(function () {
$("#chkdwn2").click(function () {
if (this.checked)
$('#dropdown').attr('disabled', 'disabled');
else
$('#dropdown').removeAttr('disabled');
});
});
</script>
A better solution without if-else:
$(document).ready(function() {
$("#chkdwn2").click(function() {
$("#dropdown").prop("disabled", this.checked);
});
});
Try -
$('#chkdwn2').change(function(){
if($(this).is(':checked'))
$('#dropdown').removeAttr('disabled');
else
$('#dropdown').attr("disabled","disabled");
})
Source: Stackoverflow.com