MAX가 체크 된 경우 jquery 라디오 그룹을 비활성화하십시오.

Question

MAX 값을 선택하면 어떻게 라디오 버튼 그룹을 비활성화 할 수 있습니까? 필자의 예에서는 2 개의 라디오 버튼 중 최대 2 개를 체크하고 나머지 2 개를 체크했을 때는 나머지를 무효로하고 싶다.

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var MAX=2;    
    }); 
</script> 

<form> 
<div> 
<ul> 
    <li><input type="radio" class="rbutton" name="radio[]" value="1" /></li> 
    <li><input type="radio" class="rbutton" name="radio[]" value="2" /></li> 
    <li><input type="radio" class="rbutton" name="radio[]" value="3"/></li> 
    <li><input type="radio" class="rbutton" name="radio[]" value="4" /></li> 
</ul> 
</div> 
</form> 

Answer 1

당신은 체크 박스 대신

HTML

<ul> 
    <li><input type="checkbox" class="rbutton" name="radio[]" value="1" /></li> 
    <li><input type="checkbox" class="rbutton" name="radio[]" value="2" /></li> 
    <li><input type="checkbox" class="rbutton" name="radio[]" value="3"/></li> 
    <li><input type="checkbox" class="rbutton" name="radio[]" value="4" /></li> 
</ul>​ 

SCRIPT

$(function() { 
    var $inputs = $('input.rbutton'); 
    $inputs.change(function() { 
     if ($('input.rbutton:checked').length == 2) { 
      $inputs.not(':checked').prop('disabled', true); 
     } else { 
      $inputs.prop('disabled', false); 
     } 
    }); 
});​ 

0을 사용해야 시도

http://jsfiddle.net/D2QgX/

사실을 heres 당신이

$(function() { 
    var $inputs = $('input.rbutton'); 
    $inputs.change(function() {  
      $inputs.not(':checked').prop('disabled', $('input.rbutton:checked').length == 2);  
    }); 
});​ 

Answer 2

라디오 버튼이 아닌 확인란이 필요합니다. 당신이라는 이름의 체크 박스를 일단하지만이 도움이 될 것 "체크 박스 []"같은 이름이 실제로 같은 이름이 ..에 다른 이름을 부여하려고 가진 두 개 이상의 라디오 버튼을 선택할 수 없습니다로 망쳐 놨주기

var $inputs = $('form input[type="checkbox"][name="checkbox\\[\\]"]'); 
$inputs.click(function() 
{ 
    if ($inputs.filter('*:checked').length >= MAX) 
    { $inputs.attr('disabled','disabled'); } 
    else 
    { $inputs.removeAttr('disabled');  } 
}); 

Answer 3

<li><input type="radio" class="rbutton" name="radio[1]" value="1" /></li> 
    <li><input type="radio" class="rbutton" name="radio[2]" value="2" /></li> 
    <li><input type="radio" class="rbutton" name="radio[3]" value="3"/></li> 
    <li><input type="radio" class="rbutton" name="radio[4]" value="4" /></li> 

Answer 4

라디오 버튼 .. 또는 완전히 사용 확인란은 .. 당신이 단순히 버튼을 사용하지 않으려면 type="checkbox"로 유형을 변경 요소에 장애인 속성을 추가해야합니다. 이 코드는 트릭을 수행합니다.

MAX = 2; 

$('.rbutton').click(function(){ 
    var checked = []; 
    $('.rbutton').each(function(){ 
    $(this).removeAttr('disabled'); 
    if($(this).is(':checked')) 
     checked.push(this); 
    }); 
    if(checked.length == MAX) 
    $('.rbutton').each(function(){ 
     if($.inArray(this, checked) == -1) 
      $(this).attr({disabled:'disabled'}); 
     }); 
});​ 

체크 박스가 선택되어 때마다, 그것은 확인 확인란을 모두 계산하고 그 카운트가 최대 동일한 경우, 그것은 그들 모두를 사용하지 않습니다. 또한 선택을 취소하고 다시 사용할 수 있습니다. See it working here.

Answer 5

이 jsFiddle example

var MAX = 2; 
$('input.rbutton').click(function() { 
    ($('input.rbutton:checked').length == MAX) ? $('input.rbutton').not(':checked').attr('disabled',true):$('input.rbutton').not(':checked').attr('disabled',false); 
});​