jQuery : 체크 박스를 클릭하면 애니메이션 div

Question

내 코드에 버그가 있습니다. 나는 해결책을 찾기 위해 몇 시간 동안 연구를 해왔다. 여기에 내가 달성하려고 노력하고있어 :

나는 6 개의 체크 박스가있는 페이지가있다. 각 체크 박스 주위에 배치 칸 .control-case이 있습니다. 5 개의 확인란을 선택하면 나머지 확인란의 .control-case에는 .unselected이 추가됩니다.

이제이 래퍼 .control-case .unselected을 클릭하면 jQuery 색상으로 애니메이션을 적용하려는 알림 기간이 있습니다.

좋은 소식 : 클릭하면 다소 효과가 있습니다.

나쁜 소식 : 가끔씩 클래스가없는 div가 트리거되고 색상 변경이 반복 될 수 있습니다 (대기열 백업으로 인해). 클릭했을 때 올바른 div에서만 한 번 트리거되도록 허용하려면 어떻게해야합니까?

P. 나는 또한 .hasClass 방법을 시도했다. 성공하지 못했습니다. 나는 모든 지원을 주셔서 감사합니다 http://pastebin.com/8XR7iHp2

:

여기 내 코드입니다! :)

$('#type-controls .control-case.unselected').click(function() { 

새로운 클릭 핸들러

Answer 1

이 코드를 실행할 때마다, 실제로 코드에 추가됩니다. 따라서 반복 발사가 발생합니다. 다른 방법을 사용하여 코드를 다시 작성했습니다. 그것이 당신의 요구 사항을 충족시키는 지보십시오.

$(document).ready(function() { 
     $('input:checkbox#foam-control, input:checkbox#reversecurve-control, input:checkbox#ultra-control, input:checkbox#pro-control, input:checkbox#icebreaker-control').attr('checked', true); 
     $("#type-controls input[type=checkbox]").click(function() { 
      var countchecked = $("#type-controls input[type=checkbox]:checked").length; 
      if (countchecked >= 5) { 
       $('#type-controls input[type=checkbox]').not(':checked').attr("disabled", true); 
      } 
      else { 
       $('#type-controls input[type=checkbox]').not(':checked').attr("disabled", false); 
      } 
     }); 

     $("#type-controls label").click(function() { 
      var countchecked = $("#type-controls input[type=checkbox]:checked").length; 
      if (countchecked >= 5 && $(this).parent().hasClass('unselected')) { 
       alert("Do notice"); 
       $('.max-notice').animate({ 
        'backgroundColor': '#c30c08', 
        'color': '#fff' 
       }, 400).delay(3000).animate({ 
        'backgroundColor': '#fff', 
        'color': '#777' 
       }, 300); 
      } 
     }); 
    });​ 

당신은