jQuery - disable selected options

Question

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.

user113716 · Accepted Answer · 2010-05-19T16:58:57.277

149

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

edited May 19 '10 at 16:58

answered May 19 '10 at 16:21

user113716

318,772
63
451
440

Updated my answer to re-enable the proper option when you click 'remove'. – user113716 May 19 '10 at 16:59
this also works great, thank you. is there any downside to using find and data like in Simen's example? – Jeffrey May 19 '10 at 17:13
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 – Simen Echholt May 19 '10 at 17:13
@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 May 19 '10 at 17:17
5

@user113716 Please use `.prop('disabled', true);` as it's more recommended in such cases. – Positivity Feb 10 '14 at 14:01
Updated fiddle with new jquery using .prop('disabled', true); http://jsfiddle.net/v08rjnth/1/ – rozalex Apr 08 '18 at 19:26

score 13 · Answer 2 · answered Dec 06 '16 at 17:10

13

pls try this,

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

answered Dec 06 '16 at 17:10

Siva Anand

2,872
2
18
9

Simen Echholt · Answer 3 · 2010-05-19T16:57:00.667

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/

edited May 19 '10 at 16:57

answered May 19 '10 at 16:50

Simen Echholt

11,243
2
34
26

great this works, though I need one more addition. can it also stay on the -select- title and not show the latest option selected? – Jeffrey May 19 '10 at 16:57
Add `$(this).val('');` at the end of the `change` function. – Simen Echholt May 19 '10 at 17:03
+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. – user113716 May 19 '10 at 17:12

score 5 · Answer 4 · answered May 19 '10 at 16:21

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

same problem as patrick's first attempt. the enabling on the remove click is renewing all disabled options. — Jeffrey, May 19 '10 at 16:47

jQuery - disable selected options

4 Answers4

Linked