Enable/Disable a dropdownbox in jquery

Question

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.

Kris Krause · Accepted Answer · 2011-10-09 11:52:11Z

195

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

answered Oct 9, 2011 at 11:52

Kris Krause

7,3162 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kris Krause Over a year ago

Note: jQuery 1.6.x utilizes .prop whereas earlier versions utilize .attr

Fabrício Matté Over a year ago

$("#chkdwn2").change(function() { $("#dropdown").prop('disabled', !this.checked); }) jsfiddle.net/tft4t/74

Chris Rosete · Accepted Answer · 2014-10-24 20:16:27Z

15

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

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

answered Oct 24, 2014 at 20:16

Chris Rosete

1,26815 silver badges14 bronze badges

1 Comment

SeaWarrior404 Over a year ago

This should be the accepted answer(In early 2019) considering each loop etc have performance implications and using the attr method is the most performant way of doing it.

Jayendra · Accepted Answer · 2011-10-09 11:54:13Z

11

Try -

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

answered Oct 9, 2011 at 11:54

Jayendra

52.8k4 gold badges83 silver badges90 bronze badges

Comments

genesis · Accepted Answer · 2011-10-09 11:48:37Z

2

$("#chkdwn2").change(function(){
       $("#dropdown").slideToggle();
});

JsFiddle

answered Oct 9, 2011 at 11:48

genesis

51.1k20 gold badges99 silver badges127 bronze badges

1 Comment

AxleWack Over a year ago

Ill give you a thumbs up just because this is pretty cool...and I didnt know about this function.

ipr101 · Accepted Answer · 2011-10-09 11:57:06Z

2

To enable/disable -

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

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

answered Oct 9, 2011 at 11:57

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

santosh singh · Accepted Answer · 2011-10-09 11:54:24Z

1

try this

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

answered Oct 9, 2011 at 11:54

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

Comments

Muhammad Ahmad · Accepted Answer · 2018-10-13 11:44:28Z

1

A better solution without if-else:

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

answered Oct 13, 2018 at 11:44

Muhammad Ahmad

112 bronze badges

Comments

Baqer Naqvi · Accepted Answer · 2014-09-08 10:54:35Z

0

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

answered Sep 8, 2014 at 10:54

Baqer Naqvi

6,5703 gold badges54 silver badges71 bronze badges

Comments

RossGamble · Accepted Answer · 2014-10-13 09:15:53Z

0

$(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.

answered Oct 13, 2014 at 9:15

RossGamble

161 bronze badge

Comments

mohammad · Accepted Answer · 2020-02-17 04:42:46Z

0

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

            }

answered Feb 17, 2020 at 4:42

mohammad

1

Comments

Imad Ullah · Accepted Answer · 2022-10-09 20:40:19Z

0

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

edited Oct 9, 2022 at 20:40

answered Oct 9, 2022 at 20:23

Imad Ullah

1,24816 silver badges18 bronze badges

Collectives™ on Stack Overflow

Enable/Disable a dropdownbox in jquery

11 Answers 11

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related