Question

我的HTML页面中有5个选择框，我试图禁用已选中的其他选择框中的所有选项，取消选择后也必须重新启用它们。

到目前为止，我得出了这个结果：Click here for JSFiddle

使用此JQuery

$('.poli').on('keyup change', function () {
$(this)
    .siblings('select')
    .children('option[value=' + this.value + ']')
    .attr('disabled', true)
    .siblings().removeAttr('disabled');
});

然而，这并没有太好用，它当时只选择和禁用1个选项......

任何解决方案？

Answer 1

您可以使用：

DEMO

$('.poli').on('keyup change', function () {
    var selectedValues = $('.poli').find('option:selected').map(function () {
        return this.value ? this.value : null;
    });
    $('.poli').filter(function () {
        return !this.value
    }).find('option').each(function () {
        $(this).prop('disabled', ~$.inArray(this.value, selectedValues));
    });
});

Answer 2

我已更新fiddle。您需要跟踪所选选项并禁用其他选择框中的选项：

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

Answer 3

这可以清除禁用;我正在研究启用代码将在一分钟内发布：

$('select').change( function () {
    $('select').each(function() {
        $(this).siblings('select').children('option[value=' + this.value + ']').attr('disabled', true);
    });
});

使用JQuery禁用5个选择列表中的选定选项

3 个答案:

DEMO