jQuery는 체크 박스 클릭을 감지하는 기능을 내 논리로 사용합니다.

Question

이 함수를 만들었으므로 논리 흐름을 정렬하는 데 도움이 필요합니다. 그것은 어느 정도 작동하며 버그를 제거하는 데 도움이됩니다.

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

그리고 내 jQuery를 기능 : 여기

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

그리고 누군가가 관심이 있다면 내 jsFiddle입니다 :

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

,

'Top'을 클릭하면 'Bottom'이 비활성화되지 않지만 'Bottom'을 클릭하면 'Top'이 비활성화되고 'Left'를 클릭하면 같은 문제가 발생합니다. 내 '센터'는 비활성화되지 않지만 '오른쪽'을 클릭하면 '왼쪽'과 '센터'가 비활성화되는 것처럼 비활성화됩니다.

Answer 1

나는 당신의 위/아래에 문제가되지 않았지만, #center의 상태가 항상 #right의 상태에 의해 결정 때문에 다른 문제는/그 밖의 주변에 있다면 ... 관계없이이 이후입니다 무엇의 #left 그냥 설정합니다.

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

을 그 변수를 직접 그냥보기 때문에 DOM 요소이다이 경우 :

또한 모든 요소에 대한 .map() 실행, 당신은 다음과 같이 외부 받아 내부가이 논리를 원하지 않는다 청소기 나에게 (그리고 훨씬 더 빠르다. You can test it out here. 대안으로

---

, 그냥 각 그룹, like this에 대한 라디오 버튼을 사용하는 것이 좋습니다.