Home/ Questions/Q 795407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:28:34+00:00

Need to disable already selected options in select box using jQuery. I’d like it

  • 0

Need to disable already selected options in select box using jQuery. I’d like it to grey out like asmselect.

Test my example here.

//JS
$("#theSelect").change(function(){          
  var value = $("#theSelect option:selected").val();
  var theDiv = $(".is" + value);

  theDiv.slideDown().removeClass("hidden");
});


$("div a.remove").click(function () {     
  $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
});

//HTML
<body>
<div class="selectContainer">
    <select id="theSelect">
        <option value="">- Select -</option>
        <option value="Patient">Patient</option>
        <option value="Physician">Physician</option>
        <option value="Nurse">Nurse</option>
    </select>
</div>
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div>
</body>​

UPDATED: Here’s the finished solution. Thanks to Patrick and Simen.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this line to your change event handler

        $("#theSelect option:selected").attr('disabled','disabled')
        .siblings().removeAttr('disabled');

    This will disable the selected option, and enable any previously disabled options.

    EDIT:

    If you did not want to re-enable the previous ones, just remove this part of the line:

            .siblings().removeAttr('disabled');

    EDIT:

    http://jsfiddle.net/pd5Nk/1/

    To re-enable when you click remove, add this to your click handler.

    $("#theSelect option[value=" + value + "]").removeAttr('disabled');
    • 0