jQuery onay kutusunu işaretlemek için fonksiyonumdaki mantığım ile ilgili yardım

Question

Bu işlevi yaptım ve mantık akışını ayırmak için bazı yardıma ihtiyacım var. Bir dereceye kadar çalışır ve hataların ayıklanması için yardıma ihtiyaç duyar.

Benim HTML: Buraya

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

Ve benim jQuery işlevi: Burada

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

Ve Herkes ilgi ise benim jsFiddle geçerli:

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

Sahip olduğum bir sorun, 'Top' seçeneğini tıklattığınızda 'Bottom' özelliğini devre dışı bırakmaz ama 'Bottom'u tıklattığımda' Top 'seçeneğini devre dışı bıraktığımda' Sol 'tuşunu tıklattığımda da aynı sorun oluşur. 'Merkezim' devre dışı bırakılmıyor, ancak 'Sağ' tıklandığında 'Sol' ve 'Merkez' tıklaması gerektiği gibi devre dışı bırakılıyor.

Answer 1

Ben senin üst/alt ile ilgili bir sorun yoktu, ama #center 'ın devlet hep #right durumuna göre belirlenir çünkü diğer konular bir/else etrafında eğer ... ne olursa olsun orada beri vardır #left'un ne için ayarlandığını.

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

bu değişkenlerin doğrudan sadece anlaşıldığından DOM öğelerini olan Bu durumda:

Ayrıca her eleman için .map() çalışır, böyle almak dışında, içeride bu mantığı istemiyoruz için numaralı temizleyiciyi (ve önemli ise daha hızlıdır). You can test it out here. Bir alternatif olarak

---

, sadece her bir grup, like this için radyo düğmelerini kullanarak düşünün.