选择 .not(this) 不起作用

Question

我有几个选择列表，它们都具有相同的内容。我想要的是当一个选项被选中时，它将在其他选项中被禁用。

<div class="social-option">
    <select>
        <option selected="selected" value="facebook">facebook</option>
        <option value="0"></option>
        <option value="twitter">twitter</option><!-- If I select this -->
        <option value="linkedin">linkedin</option>
        <option value="instagram">instagram</option>
        <option value="flickr">flickr</option>
    </select>
</div>
<div class="social-option">
    <select>
        <option selected="selected" value="facebook">facebook</option>
        <option value="0"></option>
        <option value="twitter">twitter</option><!-- then this is disabled -->
        <option value="linkedin">linkedin</option>
        <option value="instagram">instagram</option>
        <option value="flickr">flickr</option>
    </select>
</div>
<div class="social-option">
    <select>
        <option selected="selected" value="facebook">facebook</option>
        <option value="0"></option>
        <option value="twitter">twitter</option><!-- and this also is disabled -->
        <option value="linkedin">linkedin</option>
        <option value="instagram">instagram</option>
        <option value="flickr">flickr</option>
    </select>
</div>​

使用这个：

$('.social-option select').on('change', function () {

    var newSelected = $('option:selected', this).val();
    var newSelectedSiblings = $('.social-option select').find("option[value=" + newSelected + "]");

    newSelectedSiblings.not(this).each(function() { //here is the .not selector that doesn't work
        $(this).attr('disabled', 'disabled');
    });
});

​有什么想法吗？


另外，当我用this替换选择器时，为什么这条线不起作用：

var newSelectedSiblings = $('.social-option select').find("option[value=" + newSelected + "]");

像这样：

var newSelectedSiblings = $(this).find("option[value=" + newSelected + "]");

因为change 选择器是相同的：$('.social-option select').on('change'...

http://jsfiddle.net/ilyaD/4BBcZ/5/


更新

我找到了第一个问题的解决方案： 而是

newSelectedSiblings.not(this)

我用过：

newSelectedSiblings.not('option:selected', this)

Answer 1

我会使用siblings() 函数。它做你认为它做的事：

$(this).siblings().each(function() {
    $(this).attr('disabled', 'disabled');
});

not() 函数不起作用，因为 jQuery 在比较方面很奇怪：

$(this) == $(this) // Returns false

Answer 2

您的错误是混淆了select 标签和option 标签。

newSelectedSiblings 找到一个选项标签，但是回调中的this 是选择标签。

所以not 什么都不做。

我会尝试修复您的代码，因为它看起来太复杂了，但我无法弄清楚您要做什么。

如果您禁用所有其他选择，除了选定的选择，那么任何人将如何选择它们？

请澄清“所有同级元素，但此处单击的元素”是什么意思-选择标签没有“已单击”属性-那是什么意思？

或者您是否要选择除所选标签之外的所有选项标签？干什么用的？

$('.social-option select').on('change', function () {
  $('.social-option select').not(this).find('option[name="' + $(this).val() + '"]').attr('disabled', 'disabled'); //make sure none of the options have a " in the value
}

注意：如果您更改选择，则没有提及取消禁用选项。这样做可能会很复杂，因为您没有记录它是什么。