Question

我有一个表单，我在同一页面上有多个下拉菜单。所有这些菜单都具有相同的类名（即.clientMenu）。所有菜单都有相同选项的确切选项（即蓝色，黄色，白色，黑色和绿色）。我的目标是在选择一个值后禁用所有菜单中的所有值。

如果我有10个菜单，那么如果用户选择＆＃34;蓝色＆＃34;然后在任何菜单上＆＃34;蓝色＆＃34;应该从其他9个菜单中禁用。因此，＆＃34;蓝＆＃34;只能在一个菜单中选择。

这是我尝试但不起作用的。当我说它不起作用时，我的意思是它没有禁用任何选项。

如何让这段代码生效？

提前感谢一堆

$('.clientMenu').change(function(){

    $(".clientMenu option").each(function(){

        if( $(this).val() == $(".clientMenu").val() )
            $(this).prop('disabled', true);
        else
            $(this).prop('disabled', false);

    });
});

EDITED 我创建了一个jsFiddle来简化操作 http://jsfiddle.net/24yhT/4/

Answer 1

我当然可以缩短它，不知道你为什么不能工作

function setOptionsDisabled($parent, val, disabled) {
  $parent.find('option[value="' + val + '"]').prop('disabled', disabled);
  $parent.find('option[value="0"]').prop('disabled', false);
}
$('.clientMenu').change(function(){
  $others = $('.clientMenu').not(this);
  setOptionsDisabled($others, $(this).val(), true);
  setOptionsDisabled($others, $(this).data('val'), false);
  $(this).data('val', $(this).val());
});

http://jsfiddle.net/24yhT/24/

Answer 2

问题是当您在第一个select中将该元素标记为已停用时，$(".clientMenu").val()变为null（禁用的项目不被视为有效选择，因此您丢失值）。后续迭代永远不会匹配值，因此永远不会禁用option。一种选择是在循环选项之前将更改的下拉列表的值存储到变量（var val = $(this).val()）中，然后与之进行比较。您确定不想只想禁用其他下拉列表中的值吗？现在，您的代码也会在更改下拉列表中禁用该选项。您应该像这样$(".clientMenu").not(this).find("option")....

过滤掉

如何禁用具有相同值jQuery的所有菜单中的所有选项

2 个答案: