如何禁用下拉菜单中的选项

Question

This is a very short and simple question, is there a way in javascript to disable options in a drop down menu, for example:

Do you want to use drop down menu?

If user selected yes then undisable options in drop down menu

if user does not want to use dropbox then keep the options in the drop down menu disabled

Thanks

Answer 1

CSS is purely for styling, if you want to disable a select box look into the readonly="readonly" property. Keep in mind if you want to change the attribute like this on the fly I'd recommend using some javascript library like jQuery

Answer 2

You cannot disable any element using CSS, just stylize it. You should use JavaScript to do what you want.

In JS you may disable it using disabled property of a DOM object.

Answer 3

Here is a Jquery function that would handle what you're looking for

    $(function () {
            $('#useDDL').click(function () {
                var satisfied = $('#useDDL:checked').val();
                if (satisfied != undefined) $('#DDL').removeAttr('disabled');
                else $('#DDL').attr('disabled', 'disabled');
            });
        });

Where DDL is the drop down menu and useDDL is a checkbox the user can check

Answer 4

To "disable" an element with CSS you must set it to display: none or visibility: hidden .

But if you want to work with events you will need JavaScript.

Answer 5

You can better use jquery's show() and hide() functions to show or hide particular options based on what users select. This should be the best approach.