76

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.

Improve this question
0

4 Answers 4

Reset to default
151

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');
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Updated my answer to re-enable the proper option when you click 'remove'.
this also works great, thank you. is there any downside to using find and data like in Simen's example?
Less code and less memory consumption (no use of data()) than my answer :) Just remember to update the rel-tags of the links in the original code, as they're all pointing to Patient
@Jeffrey - I like Simen's solution too. As I noted in a comment below his, only thing I would do differently is associate the option elements with their a elements in a loop before change is ever called. His version would save an element lookup if he did that. My version saves some memory overhead. Either would work.
@user113716 Please use .prop('disabled', true); as it's more recommended in such cases.
|
13

pls try this,

$('#select_id option[value="'+value+'"]').attr("disabled", true);
Improve this answer

Comments

6

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'); });

Demo: http://jsfiddle.net/AaXkd/

Improve this answer

3 Comments

great this works, though I need one more addition. can it also stay on the -select- title and not show the latest option selected?
Add $(this).val(''); at the end of the change function.
+1 I like your approach of using data() to associate the option with the proper element. Given that approach, it may be better to make the association in a loop outside the change event handler so you're assigning the data superfluously. Looks nice though.
5

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'); });
Improve this answer

1 Comment

same problem as patrick's first attempt. the enabling on the remove click is renewing all disabled options.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.