How to Disable or Enable a SELECT Dropdown list using jQuery

You can use jQuery .prop() method to change the properties of an HTML element, dynamically, that is, at runtime. So, let’s see how we can use the .prop() method to disable or enable a <select> dropdown list.

I was recently upgrading this demo page and came across a requirement, where I had to disable and later enable the <select> dropdown list, based on certain condition. I thought I should share this feature here on my blog.

.prop() method Syntax

$(selector).prop(property, value)

The .prop() method sets or returns the properties and values of an HTML element. The method takes two parameters.

1) property: the name of the property (for example, disabled or checked)
2) value: the value of the property (so, if the property is disabled, its value will be either true or false).

Note: The value can also be a function. See the second example.

Now, let’s apply this method on our <select> element and see how it works.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>jQuery .prop() method example</title>
    <style>
    	select, p, span {
        	font: 17px Calibri;
        }
    </style>
</head>
<body>
	<p>
    	Select a value from dropdown list!
    </p>

    <!--The SELECT dropdown list element-->
    <select id="sel">
        <option selected value="">-- select a number --</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
    </select>
    
    <p id="cont"> </p>
</body>

<script>
    $(document).ready(function () {
        $('#sel').change(function () {
            
            $(this).prop('disabled', true);

            let counter = $(this).val();
        
            setInterval(function () {
                counter--;

                if (counter >= 0) {
                    $('#cont').html('Dropdown list <b>disabled</b>. It will enable in <b>' + counter + '</b> seconds');
                }
                if (counter === 0) {
                    $('#tbTm').val(); 
                    clearInterval(counter);

                    $('#sel').prop('disabled', false);
                    $('#sel')[0].selectedIndex = 0;
                
                    $('#cont').html('Dropdown list <b>enabled</b> again.');
                }
            }, 1000);
            
            setInterval(+counter * 1000);
        });
    });
</script>
</html>
Try it


Well, this is one way of doing it. It’s a very practical example. You can however do the process (enable or disable <select> element) on a button’s click event. For example,

<html>
<head>
    <title>jQuery .prop() method example</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        select, p, input {
            font: 17px Calibri;
        }
    </style>
</head>
<body>
    <p>
    	<input type="button" value="Click to disable and enable" id='bt'>
    </p>

    <!--The SELECT dropdown list element-->
    <select id="sel">
        <option selected value="">-- select a name --</option>
        <option value="Black Vulture">Black Vulture</option>
        <option value="American Kestre">American Kestre</option>
        <option value="Snail Kite">Snail Kite</option>
    </select>
    
    <p id="msg"></p>
</body>

<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            $('#sel').prop('disabled', function (index, value) {   // Passing "function()" as parameter to .prop().
                if (value) {
                    $('#msg').html('dropdown list <b>enabled</b>');
                }
                else {
                    $('#msg').html('dropdown list <b>disabled</b>');
                }

                return !value; 	// return true or false
            });
        });
    });
</script>
</html>
Try it

In the above example, the .prop() method has two parameters,

a) the property, which is disabled and

b) the value as a function, which again has two parameters. The first is the index (like 0, 1, 2, 3 …) and the second is the value (its either true or false). The function will return !value, which means the opposite value. So, if is true, it will return false and if its false, it will return true.

$('#sel').prop('disabled', function (index, value) {  
	return !value;
}

That’s it. Thanks for reading.

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: