jQuery Hilfe mit meiner Logik in meiner Funktion zum Erkennen von Checkbox-Klicks

Question

Ich habe diese Funktion gemacht und brauche Hilfe beim Aussortieren des Logikflusses. Es funktioniert ... bis zu einem gewissen Grad und braucht nur Hilfe, um die Fehler auszusortieren.

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

Und hier ist meine jQuery-Funktion:

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

Und hier ist mein jsFiddle wenn jemand interessiert:

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

Ein Problem, das ich habe, ist, dass, wenn Sie auf "Top" klicken, deaktiviert es nicht "Bottom", aber wenn ich auf "Bottom" klicken deaktiviert "Top" und das gleiche Problem auftritt, wenn ich auf "Links" klicke, Mein 'Center' wird nicht deaktiviert, aber wenn Sie auf 'Right' klicken, werden 'Left' und 'Center' deaktiviert.

Answer 1

Ich habe keine Probleme mit dem oben/unten, aber die anderen Probleme sind, weil #center ‚s Zustand ist immer durch den Zustand der #right bestimmt, da es eine ist, wenn/sonst um es ... unabhängig von dem, was #left setzen Sie es einfach auf.

Auch .map() läuft für jedes Element, Sie wollen nicht, diese Logik im Inneren gibt, nehmen Sie es draußen wie folgt aus:

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 diesem Fall die Variablen direkt nur die DOM-Elemente sind, weil es aussieht Reiniger zu mir (und ist viel schneller, wenn es darauf ankommt). You can test it out here.

---

Als Alternative betrachten nur für jede Gruppe die Optionstasten, like this.