jQuery - Disable or enable a SELECT dropdown using 2 simple methods

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

I was working on this demo page and came across a requirement, where I had to disable and later enable the <select> dropdown list, based on certain condition. Found a solution and thought it is worth sharing on my blog.

Let's understand the .prop() method first.

.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 a <select> element and see how it works.

1st Method

<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <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 basic example. You can however do the process (enable or disable <select> element) on a button’s click event.

2nd Method

<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

← PreviousNext →