jQuery help with my logic in my function for detecting checkbox clicks
<p>I made this function and need some help sorting out the logic flow. It works... to some degree and just need help weeding out the bugs.</p>

<p><strong>My HTML:</strong></p>

<pre><code>&lt;span style="float: left;"&gt;&lt;input type="checkbox" id="top" name="position" value="top" /&gt;&amp;nbsp;Top&amp;nbsp;&amp;nbsp;&lt;/span&gt;
&lt;span style="float: left;"&gt;&lt;input type="checkbox" id="bottom" name="position" value="bottom" /&gt;&amp;nbsp;Bottom&amp;nbsp;&amp;nbsp;&lt;/span&gt;
&lt;span style="float: left;"&gt;&lt;input type="checkbox" id="left" name="position" value="left" /&gt;&amp;nbsp;Left&amp;nbsp;&amp;nbsp;&lt;/span&gt;
&lt;span style="float: left;"&gt;&lt;input type="checkbox" id="center" name="position" value="center" /&gt;&amp;nbsp;Center&amp;nbsp;&amp;nbsp;&lt;/span&gt;
&lt;span style="float: left;"&gt;&lt;input type="checkbox" id="right" name="position" value="right" /&gt;&amp;nbsp;Right&lt;/span&gt;
</code></pre>

<p><strong>And here is my jQuery function:</strong></p>

<pre><code>/// Bind Position value to 'CSS : BackgroundPosition' ///       
var $positions;

function bgpos(){
    var pos = $positions.map(function() {
        if($('#top').attr('checked') == true)
            $('#bottom').attr('disabled', true);
        else
            $('#bottom').attr('disabled', false);

        if($('#bottom').attr('checked') == true)
            $('#top').attr('disabled', true);
        else
            $('#top').attr('disabled', false);

        if($('#left').attr('checked') == true){
            $('#right').attr('disabled', true);
            $('#center').attr('disabled', true);
        }else{
            $('#right').attr('disabled', false);
            $('#center').attr('disabled', false);
        }

        if($('#right').attr('checked') == true){
            $('#left').attr('disabled', true);
            $('#center').attr('disabled', true);
        }else{
        $('#left').attr('disabled', false);
        $('#center').attr('disabled', false);
        }

        if(this.checked) return this.id;
    }).get().join(' ');
    //$('#queue').html(pos);
    $('#topHeader').css({'backgroundPosition' : pos});
}

$(function() {
    $positions = $("form#frm_look_and_feel input[name='position']").change(bgpos);
});
</code></pre>

<p>And here is my jsFiddle if anyone is interested:</p>

<p><a href="http://jsfiddle.net/s2xi/nWT5J/2/" rel="nofollow">http://jsfiddle.net/s2xi/nWT5J/2/</a></p>

<p>One problem I have is that when you click on 'Top' it doesn't disable 'Bottom' but when I click on 'Bottom' it does disable 'Top' and the same problem occurs when I click on 'Left', My 'Center' doesn't get disabled, but clicking on 'Right' disables 'Left' and 'Center' like it should.</p>
