Categories: Snippets

jQuery : Disable and Enable Selected Options in DropDownList

To disable the selected option from select input element, following piece of code can be used,

$("#selectid option:selected").attr('disabled','disabled');

and to enable an option that is disabled already,

$("#selectid option[value="somevalue"]").removeAttr('disabled');

In this example, let us have one div for each option of select element with the option text and a remove link which will be hidden by default. When a user selects an option, we will display the corresponding div for that option and disable the option in the select element. The user can again enable the option by clicking on the remove link.

<html>
<head>
<title>Disable and Enable Select Options using jQuery</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#ddTest").change(function(){          
     var value = $("#ddTest option:selected").val();
     if (value === '') return;
     var theDiv = $(".is" + value);
     //displays the selected option div
     theDiv.slideDown().removeClass("hidden");
     //disbales the selected option
     $("#ddTest option:selected").attr('disabled','disabled');
     $(this).val('');
 });   
 $("div a.remove").click(function () { 
     var value = $(this).attr('rel');
     var theDiv = $(".is" + value);
     //enables the disabled option
     $("#ddTest option[value=" + value + "]").removeAttr('disabled');
     //hides the selected option div
     $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
 });
});
</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>
<body>
    <div class="selectContainer">
        <select id="ddTest">
            <option value="">- Select Option-</option>
            <option value="Option1">Option 1</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
        </select>
    </div>
    <div class="hidden isOption1">Option 1 <a href="#" class="remove" rel="Option1">remove</a></div>
    <div class="hidden isOption2">Option 2 <a href="#" class="remove" rel="Option2">remove</a></div>
    <div class="hidden isOption3">Option 3 <a href="#" class="remove" rel="Option3">remove</a></div>
</body>
</html>