Javascript JQuery：禁用多个<；选项>；论多元文化<；选择>；基于选定值的数组

我确实有一个包含3个（或更多）

元素的表单，该元素具有类

'products-combo'

和相同的

值

目标： 如果在任何

元素中选择了

，则在每个

中禁用特定的

。如果所选选项已更改，则重新启用上一个

我能够用下面的JQuery完成禁用部分。但是，如果在更改另一个

元素后尝试更改所选的

，则先前选择的

不会启用

在代码段中重现问题的步骤： 按以下顺序在选择框中选择选项

在第一个选择框中选择一个选项

在第二个选择框中选择一个选项

在第三个选择框中选择一个选项

现在一切正常

现在在第一个选择框中更改所选选项

之后，单击第二个选择框或第三个选择框。在这里，您可以看到第一个选择选项的新选项和旧选项被禁用

预期结果： 当用户更改第一个选择选项时，预期将重新启用第一个选择元素的先前选择的选项

示例场景：

 1. In first select box "Product 1" option is selected
 2. In second select box "Product 2" option is selected
 3. In third select box "product 3" option is selected

$('.products_combo')
    .not(this)
    .children('option[value="' + fieldValue + '"]')
    .prop('disabled', true);

现在在第一个选择框中更改所选选项

select "Product 5" option in the first select box.

预计将在第二个和第三个选择框中禁用“产品5”选项并启用“产品1”。但只有禁用正在发生。未重新启用“产品1”

我尝试过的：

 1. In first select box "Product 1" option is selected
 2. In second select box "Product 2" option is selected
 3. In third select box "product 3" option is selected

$('.products_combo')
    .not(this)
    .children('option[value="' + fieldValue + '"]')
    .prop('disabled', true);

它给出了与代码段相同的结果

如果我加上

.siblings().prop('disabled', false);

然后每隔一段时间就会启用其他选项。所以这是行不通的

如何解决这个问题

要测试的代码段：

 1. In first select box "Product 1" option is selected
 2. In second select box "Product 2" option is selected
 3. In third select box "product 3" option is selected

$('.products_combo')
    .not(this)
    .children('option[value="' + fieldValue + '"]')
    .prop('disabled', true);

$（'body'）.on（“更改”，“产品组合”，函数（evt）{
var fieldValue=$（this.val（）；
$（this）.同级（'.products combo'）。子级（'option'）。每个（function（））{
if（$（this）.val（）==字段值）{
$（this.attr（'disabled'，true）；
}
});
});

选择1
产品1
产品2
产品3
产品4
产品5
选择2
产品1
产品2
产品3
产品4
产品5
选择3
产品1
产品2
产品3
产品4
产品5
循环所有选项时，如果该选项不是所选选项，则需要重新启用它


const$selects=$（“.products组合”）；
$selects.on（'change'，函数（evt）{
//创建空数组以存储选定的值
const selectedValue=[]；
//获取所有选定的选项并对其进行筛选，以仅获取值为attr的选项（跳过默认选项）。然后将值推送到数组中。
$selects.find（“：selected”）.filter（函数（idx，el）{
返回$（el.attr（'value'）；
}).每个（功能（idx、el）{
selectedValue.push（$（el.attr（'value'））；
});
//循环所有选项
$selects.find（'option'）。每个（函数（idx，option）{
//如果数组包含当前选项值，否则我们将重新启用它。
if（selectedValue.indexOf（$（option）.attr（'value'））>-1）{
//如果当前选项是所选选项，则跳过它，否则禁用它。
如果（$（选项）.is（':checked'））{
回来
}否则{
$（this.attr（'disabled'，true）；
}
}否则{
$（this.attr（'disabled'，false）；
}
});
});

选择1
产品1
产品2
产品3
产品4
产品5
选择2
产品1
产品2
产品3
产品4
产品5
选择3
产品1
产品2
产品3
产品4
产品5
谢谢您的回答。但它不起作用。运行我的测试条件。在第一个选择框中选择产品1
，然后在第二个选择框中选择产品2

。然后您可以看到，在第三个选择框中，

product1

已启用。这不应该。@ab_ab检查这里。如果它是正确的，我将更新响应。对小提琴正在演奏。非常感谢。把它加到答案上。如果可以，请添加一些评论，以便我能理解。