jQuery - 체크 박스 클릭 순서 로깅

Question

나는 공연 예술 센터의 자원 봉사자를 추적하는 시스템을 가지고 있습니다. 교대 근무를하기 위해 가입 할 때 친구 (또는 친구)를 등록 할 수도 있습니다. 등록이 너무 많으면 대기자 명단이 있습니다. 이 양식은 선택 친구에 대한 그래서 다음과 같습니다 대기자 명단이 하나 개의 위치가에 남아있다

경우 나는 그들이 그렇게 존을 선택 (선택하는 경우 다음 사람의 이름이 빨간색으로해야하지만 때 Jane은 빨간색으로 바뀌어 경고로 작용하는지 확인합니다.)

내 문제는 사용자가 두 가지를 모두 확인한 다음 Jane 대신 John을 선택 취소하면 Jane이 다시 검은 색으로 바뀌어야한다는 것입니다.

같은 것을 사용하여 클릭 추적하는 쉬운 방법이 있나요 : 나는 요소의 인덱스를 사용 괜찮 작업했지만,이 순서를 추적 할 것이기 때문에 그것이 작동하지 않을 실현

$("input:checkbox").change(function(){ 

    $("input:checked").each(function(i){ 

     //object/array manipulation? 

    }); 

}); 

가 체크 박스는 처음부터 확인되었습니다.

옳은 방향의 포인트조차도 놀랄 것입니다. 나는 계속할 것을별로주지 않았 음을 알았다.

감사합니다,

제이슨

Answer 1

좋은 도전. 당신은 이것을 할 수 있었다 :

var limit = 4; //Maximum checked allowed, for example 4 
var checkedOrder = []; //Priority queue (stores checking order) 
$("input:checkbox").change(function(){ 
    var nCurrentlyChecked = $("input:checkbox:checked").length; // EDIT: How many are currently checked? 
    if($(this).is(":checked")){ //If checkbox is checked 
     checkedOrder.unshift(this); //Insert to the begining of the array (push to the queue) 
     if(nCurrentlyChecked > limit) //If more than allowed 
      $(this).next().css('backgroundColor', 'red'); //Turn element red 
    }else{ //If checkbox is unchecked 
     $(this).next().css('backgroundColor', 'black'); //Always blacken unchecked checkbox 
     var nTurnedBlack = 0; 
     //Now, we blacken checkboxes by priority 
     for(var i=0; i<checkedOrder.length && nTurnedBlack <= limit; i++){   
      var checkbox = checkedOrder[i]; 
      if(checkbox == this) continue; //Ignore currently unchecked checkbox 
      $(checkbox).next().css('backgroundColor', 'black'); 
      nTurnedBlack++; 
     } 
    } 
}); 

당신이 볼 수 있던대로, 당신이 볼 수 있던대로, 검정색 체크 박스에 첫째로 검사 된 "특혜"가있다. 이것은 테스트 된 코드가 아니며 오류가있을 수 있지만 최종 해결책을 안내해 줄 수 있기를 바랍니다.

Answer 2

당신은 쉽게 확인 체크 박스의 수를 셀 수 : maxSlotsAvailable 가능한 슬롯의 수는

$("input:checkbox").change(function(){ 
    if ($("input:checkbox:checked").length >= maxSlotsAvailable) { 
     // Make your remaining ones red, be sure that no newly-checked 
     // ones are red 
     $("input:checkbox:not(:checked)").addClass("maxedOutWarning"); 
     $("input:checkbox:checked").removeClass("maxedOutWarning"); 
    } 
    else { 
     // Make sure they're all black 
     $("input:checkbox").removeClass("maxedOutWarning"); 
    } 
}); 

.... 위의 내용은 의 모든 체크 박스에 적용되지만 선택기를 통해 특정 컨테이너에 쉽게 적용 할 수 있습니다.

위의 내용은 모든 슬롯이 채워진 경우에도 사용자가 확인란을 계속 확인할 수 있다는 것을 나타냅니다. 만약 당신이 그때 당신은 if의 진정한 조항의 두 번째 줄을 제거 할 수 있습니다. (나는 아마 그들에게 너무 많은 체크가되어 있다는 것을 보여주는 별도의 지시자와 미리 박스를 체크 할 수있게하고 선택을 취소 할 수있게하고, 너무 많지는 않은지 사전 테스트를한다. 그것의 소리, 당신도하고있는 것입니다.)