jQuery help with my logic in my function for detecting checkbox clicks

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.

Nick Craver · Accepted Answer · 2010-11-21 01:25:31Z

2

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.

edited Nov 21, 2010 at 1:25

answered Nov 21, 2010 at 1:15

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eli Over a year ago

O.O sometimes I feel like a newbie with JavaScript when you guys come up and teach something new! Thank you very much for your help Nick

Eli Over a year ago

hmmm, maybe the radio could work. I was looking at how the user could identify which options they have available to position the backgdound image without being confused by all these options.

Nick Craver Over a year ago

@s2xi - I would use radio groups, just wrap them in another element with a border, like this: jsfiddle.net/nick_craver/v4Ka9/2

Eli Over a year ago

Thank you, you actually helped more than you think you did =)

Collectives™ on Stack Overflow

jQuery help with my logic in my function for detecting checkbox clicks

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related