Enable/Disable a dropdownbox in jquery

JqueryDrop Down-Menu

Jquery 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:

http://jsfiddle.net/tft4t/

$(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();
});

JsFiddle

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);
                
            }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionARUN P.SView Question on Stackoverflow
Solution 1 - JqueryKris KrauseView Answer on Stackoverflow
Solution 2 - JqueryChris RoseteView Answer on Stackoverflow
Solution 3 - JqueryJayendraView Answer on Stackoverflow
Solution 4 - JquerygenesisView Answer on Stackoverflow
Solution 5 - Jqueryipr101View Answer on Stackoverflow
Solution 6 - Jquerysantosh singhView Answer on Stackoverflow
Solution 7 - JqueryMuhammad AhmadView Answer on Stackoverflow
Solution 8 - JqueryBaqer NaqviView Answer on Stackoverflow
Solution 9 - JqueryRossGambleView Answer on Stackoverflow
Solution 10 - JquerymohammadView Answer on Stackoverflow