Question

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.

My HTML:

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

And here is my jQuery function:

/// 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);
});

And here is my jsFiddle if anyone is interested:

http://jsfiddle.net/s2xi/nWT5J/2/

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.

Answer 1

I didn’t have a problem with your top/bottom, but the other issues are because #center‘s state is always determined by the state of #right, since there’s an if/else around it…regardless of what #left just set it to.

Also .map() runs for every element, you don’t want this logic inside there, take it outside like this:

function bgpos(){
    bottom.disabled = top.checked;
    top.disabled = bottom.checked;
    left.disabled = center.checked || right.checked;
    center.disabled = left.checked || right.checked;
    right.disabled = left.checked || center.checked;
    var pos = $positions.map(function() {
        if(this.checked) return this.id;
    }).get().join(' ');
    $('#topHeader').css({'backgroundPosition' : pos});
    $('#output').html(pos);
}

In this case those variables are the DOM elements directly just because it looks cleaner to me (and is much faster, if it matters). You can test it out here.

---

As an alternative, consider just using radio buttons for each group, like this.