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.

score 191 · Accepted Answer · answered Oct 09 '11 at 11:52

191

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 09 '11 at 11:52

Kris Krause

7,304
2
23
26

7

Note: jQuery 1.6.x utilizes .prop whereas earlier versions utilize .attr – Kris Krause Oct 09 '11 at 12:13
`$("#chkdwn2").change(function() { $("#dropdown").prop('disabled', !this.checked); })` http://jsfiddle.net/tft4t/74/ – Fabrício Matté Apr 18 '13 at 21:39

score 15 · Answer 2 · answered Oct 24 '14 at 20:16

15

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

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

answered Oct 24 '14 at 20:16

Chris Rosete

1,240
15
13

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. – SeaWarrior404 Feb 11 '19 at 10:18

score 11 · Answer 3 · answered Oct 09 '11 at 11:54

11

Try -

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

answered Oct 09 '11 at 11:54

Jayendra

52,349
4
80
90

score 2 · Answer 4 · answered Oct 09 '11 at 11:48

2

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

JsFiddle

answered Oct 09 '11 at 11:48

genesis

50,477
20
96
125

Ill give you a thumbs up just because this is pretty cool...and I didnt know about this function. – AxleWack Jul 27 '18 at 13:16

score 2 · Answer 5 · answered Oct 09 '11 at 11:57

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 09 '11 at 11:57

ipr101

24,096
8
59
61

score 1 · Answer 6 · answered Oct 13 '18 at 11:44

1

A better solution without if-else:

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

answered Oct 13 '18 at 11:44

Muhammad Ahmad

11
2

score 1 · Answer 7 · answered Oct 09 '11 at 11:54

try this

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

score 0 · Answer 8 · answered Sep 08 '14 at 10:54

0

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

answered Sep 08 '14 at 10:54

Baqer Naqvi

6,011
3
50
68

score 0 · Answer 9 · answered Oct 13 '14 at 09:15

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

score 0 · Answer 10 · answered Feb 17 '20 at 04:42

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

            }

Imad Ullah · Answer 11 · 2022-10-09T20:40:19.397

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 09 '22 at 20:40

answered Oct 09 '22 at 20:23

Imad Ullah

929
9
17

Enable/Disable a dropdownbox in jquery

11 Answers11

Linked

Related