Menu
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.
376
The disabled attribute is a boolean attribute. When present, it specifies that an option should be disabled. A disabled option is unusable and un-clickable. The disabled attribute can be set to keep a user from selecting the option until some other condition has been met (like selecting a checkbox, etc.).
Simple jQuery code snippet to loop select box options (drop down boxes) in a form to get the values and text from each option. Useful for manipulating values in form select boxes. $('#select > option'). each(function() { alert($(this).
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'); pls try this,
$('#select_id option[value="'+value+'"]').attr("disabled", true); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
