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
}

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

选择.not（this）不起作用

2 个答案: