CODEWITHSUNDEEP
jqueryjquery-selectorsthis
ilyo
ilyo

Reputation: 36411

Selecting .not(this) not working

I have a few select lists that all have the same contents. What I want is when an option is selected in one, it will be disabled in the others.

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

using this:

$('.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');
    });
});

​Any ideas why?


Also, why doen't this line work when I replace the selector with this:

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

like this:

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

since the change selector is the same: $('.social-option select').on('change'...

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


Update

I've found a solutions to the first question: instead

newSelectedSiblings.not(this)

I used:

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

Upvotes: 0

Views: 333

Answers (2)

Ariel
Ariel

Reputation: 26783

Your mistake is confusing the select tag and the option tag.

newSelectedSiblings finds an option tag, but this in the callback is the select tag.

So not does nothing.

I would try to fix your code since it's seems far too complex, but I can't figure out what you are trying to do.

If you disable all the other selects, except the selected one, then how will anyone ever pick them?

Please clarify what you mean by "all sibling elements but the clicked one here" - select tags don't have a "clicked" attribute - so what do you mean by that?

Or are you trying to select all the option tags except the selected one? What for?

$('.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
}

Note: There is no mention of un-disabling an option if you change your selection. Doing so might be complicated since you have no record of what it was.

Upvotes: 2

Blender
Blender

Reputation: 298462

I'd use the siblings() function. It does what you think it does:

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

The not() function doesn't work because jQuery is strange when it comes to comparisons:

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

Upvotes: 2

Related Questions