ansaurus

Question

Answer 1

+1 A:

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

jeanreis 2010-05-19 16:21:09

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

Jeffrey 2010-05-19 16:47:10

Answer 2

+4 A:

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

patrick dw 2010-05-19 16:21:50

After items are deleted they're not enabling properly, http://jsfiddle.net/pd5Nk/.

Jeffrey 2010-05-19 16:44:33

Updated my answer to re-enable the proper option when you click 'remove'.

patrick dw 2010-05-19 16:59:34

this also works great, thank you. is there any downside to using find and data like in Simen's example?

Jeffrey 2010-05-19 17:13:02

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 2010-05-19 17:13:31

@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.

patrick dw 2010-05-19 17:17:09

Answer 3

+2 A:

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/

Simen Echholt 2010-05-19 16:50:52

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 2010-05-19 16:57:48

Add `$(this).val('');` at the end of the `change` function.

Simen Echholt 2010-05-19 17:03:36

works great, grazie!

Jeffrey 2010-05-19 17:09:43

@Simen Echholt - +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.

patrick dw 2010-05-19 17:12:04

ansaurus

tags:

views:

answers:

jQuery - disable selected options

related questions