选择 .not(this) 不起作用

Posted 2023-05-09

【中文标题】选择 .not(this) 不起作用

【英文标题】：Selecting .not(this) not working

【发布时间】：2012-07-11 23:09:17

【问题描述】：

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

<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)

【参考方案1】：

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

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

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

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

【参考方案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

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

【讨论】：

谢谢，我正在尝试禁用其他列表中的选定选项，如果我在一个列表中选择“facebook”，我将无法在其他列表中选择它（添加了一个 jsfiddle）跨度>

另外，为什么用$(this) 替换change function 中的$('.social-option select') 不起作用？从你说的应该是..

@IlyaD 顺便说一句，设置禁用属性的功能是完全没有必要的 - jQuery 会自动将这样的功能应用于所有元素。

我已经更新了我的问题（查看顶部）。我不明白为什么没有必要，究竟什么是没有必要的？

@IlyaD each() 函数/循环不是必需的。只需执行newSelectedSiblings.not(this).attr('disabled', 'disabled') - 您无需将其包装在一个循环中。但无论如何，我很确定我为您编写的代码会满足您的要求。