jQuery禁用选定的选项

Question

I have tried to apply this fiddle solution but without any luck :(

$('.select').on('keyup change', function () {
    var selected = [];
    $(".select option:selected").each(function () {
        if ($(this).val() !== "") selected.push($(this).val());
    });
    $(".select:not(this) option").each(function () {
        if (selected.indexOf($(this).val()) > -1) $(this).prop("disabled", true);
        else $(this).prop("disabled", false);
    });
});

I want to make disabled all selected items from previously selected lists.

Answer 1

That is not working because you are adding the select lists dynamically and to use the keyup and change events, you need to use delegation:

$(document).on('keyup change', '.select', function () {
    var selected = [];
    $(".select option:selected").each(function () {
        if ($(this).val() !== "") selected.push($(this).val());
    });
    $(".select:not(this) option").each(function () {
        if (selected.indexOf($(this).val()) > -1) $(this).prop("disabled", true);
        else $(this).prop("disabled", false);
    });
});

See the fiddle: https://jsfiddle.net/wfaaztnb/8/

Answer 2

Just replace the selector $('.select') with $(document) and that's it! :)