jQuery - disable selected options
JqueryHtml SelectJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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:
To re-enable when you click remove, add this to your click handler.
$("#theSelect option[value=" + value + "]").removeAttr('disabled');
Solution 2 - Jquery
pls try this,
$('#select_id option[value="'+value+'"]').attr("disabled", true);
Solution 3 - Jquery
This will disable/enable the options when you select/remove them, respectively.
$("#theSelect").change(function(){
var value = $(this).val();
if (value === '') return;
var theDiv = $(".is" + value);
var option = $("option[value='" + value + "']", this);
option.attr("disabled","disabled");
theDiv.slideDown().removeClass("hidden");
theDiv.find('a').data("option",option);
});
$("div a.remove").click(function () {
$(this).parent().slideUp(function() { $(this).addClass("hidden"); });
$(this).data("option").removeAttr('disabled');
});
Solution 4 - Jquery
This seems to work:
$("#theSelect").change(function(){
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown().removeClass("hidden");
//Add this...
$("#theSelect option:selected").attr('disabled', 'disabled');
});
$("div a.remove").click(function () {
$(this).parent().slideUp(function() { $(this).addClass("hidden"); });
//...and this.
$("#theSelect option:disabled").removeAttr('disabled');
});