2014-03-02 2 views
0

마침내 jQuery를 배울 수있게되었고, 내가 물건을 놓은 것처럼 생각하기 시작하면 다시 붙어 있습니다.체크 박스 수가 업데이트되지 않음

섹션에 체크 된 체크 상자의 수를 계산하는 스크립트가 있습니다. 섹션이 한도에 도달하면 사용자가 더 많은 선택을하지 못하도록하고 메시지를 제공하지만 다른 확인란을 선택 취소 할 수 있도록 허용해야합니다.

나는이 기능을 제외하고 체크 박스의 선택을 해제 할 때 여전히 이전 수의 체크 상자를 계산하므로 오류 메시지가 다시 나타납니다. 개수를 올바르게 업데이트하려면 어떻게합니까?

http://jsfiddle.net/MadHatrix/VxscW/3/

HTML

<div class="panel"> 
    <button class="btn-option">1</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
    <button class="btn-option">2</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
    <button class="btn-option">3</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
</div> 
<hr> 
<div class="panel"> 
    <button class="btn-option">a</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
    <button class="btn-option">b</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
</div> 

JQUERY 사전에

$('.panel').on('click', 'button', function() { 
    var checkbox = $(this).next('input:checkbox'); 
    var checkedTotal = $(this).parent('.panel').find('input[type=checkbox]:checked').length; 
    if (checkedTotal == 2) { 
     $(this).removeClass('btn-success'); 
     checkbox.prop('checked', false); 
     alert('limit has been reached'); 
    } else { 
     $(this).toggleClass('btn-success'); 
     checkbox.prop("checked", !checkbox.prop("checked")); 
    } 
}); 

감사합니다.

답변

2

이 (클릭 된) 체크 박스가 이미 선택되어 있는지 확인해야합니다. 이미 체크 된 경우이 체크 박스가 선택 취소되므로 체크 된 총계를 감소시켜야합니다.

$('.panel').on('click', 'button', function() { 
    var checkbox = $(this).next('input:checkbox'); 
    var checkedTotal = $(this).parent('.panel').find('input[type=checkbox]:checked').length; 
    if(checkbox.prop('checked')) { 
     checkedTotal =checkedTotal -1; 
    } 
    if (checkedTotal == 2) { 
     $(this).removeClass('btn-success'); 
     checkbox.prop('checked', false); 
     alert('limit has been reached'); 
    } else { 
     $(this).toggleClass('btn-success'); 
     checkbox.prop("checked", !checkbox.prop("checked")); 
    } 
}); 

fiddle

+0

@Hatrix : 작동 않았다

이 시도? –

+0

이것은 효과가 있습니다! 도와 주셔서 감사합니다! – Hatrix

+0

도와 드리겠습니다 :) –

관련 문제