여러 라디오 버튼 중 하나 선택

Question

제목이 다소 모호합니다. 그럼 설명해 드리겠습니다.

사용자가 약속을 원하는 날짜를 선택할 수있는 페이지가 있습니다. 이 다른 두 번 반복됩니다

<input type="radio" class="my-radio" value="monday" name="my_form[day][choice1][]" 
id="monday1"/> 
<label for="monday1">Monday</label> 

<input type="radio" class="my-radio" value="tuesday" name="my_form[day][choice1][]" 
id="tuesday1"/> 
<label for="tuesday1">Tuesday</label> 

<input type="radio" class="my-radio" value="wednesday" name="my_form[day][choice1][]" 
id="wednesday1"/> 
<label for="wednesday1">Wednesday</label> 

<input type="radio" class="my-radio" value="thursday" name="my_form[day][choice1][]" 
id="thursday1"/> 
<label for="thursday1">Thursday</label> 

<input type="radio" class="my-radio" value="friday" name="my_form[day][choice1][]" 
id="friday1"/> 
<label for="friday1">Friday</label> 

<input type="radio" class="my-radio" value="saturday" name="my_form[day][choice1][]" 
id="saturday1"/> 
<label for="saturday1">Saturday</label> 

: 첫 번째 선택이

라디오 버튼의 HTML 가득했습니다 까봐 그러나, 우리는이 일을 위해 그들에게 여러 선택을 제공합니다. 그러나 ID는 변경되고 이름도 그대로 유지됩니다. 두 번째로는 (월요일); id = monday2, name = my_form [day] [choice2] [], 등등.

그래서 분명히하십시오. 3 행의 라디오, 모두 같은 값이지만 ID와 이름이 다릅니다.

이제 월요일을 선택하면 어떤 행에 상관없이 다른 모든 월요일을 사용 중지하려고합니다. 이제 화요일을 선택하면 모든 월요일을 다시 활성화해야합니다.

첫 번째 부분은 jQuery로 작업했습니다.

jQuery('.my-radio').change(function() { 
// Get all elements associated to value, but the currently selected radio. 
var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id')); 

    // Disable every element that we found 
    jQuery(associates).each(function(){ 
    jQuery(this).prop('disabled', true); 
    }); 
}); 

내 유일한 문제는 두 번째 부분입니다. 이전에 비활성화 된 라디오를 다시 활성화하십시오.

JSFiddle을 사용하면 좀 더 명확 해집니다. http://jsfiddle.net/Hr9h2/1/

편집 : 답변 해 주셔서 감사합니다.

그러나 예를 들어 월요일을 세 번 또는 두 번까지 선택할 수 없다는 사실을 잊어 버렸습니다.

Answer 1

모든 라디오 버튼을 가능하게하고, 모든 확인 된 라디오 버튼을 통해 루핑 및 비활성화하여 만든 찾고있는 기능 같은 값을 가진 것들. 이 라디오 버튼의 많은 라인 작동 방법은 당신이 원하는 :

$('.my-radio').on('change', function() { 
    $('.my-radio').prop('disabled',false).filter(':checked').each(function() { 
     $('.my-radio[value="' + this.value + '"]:not(:checked)').prop('disabled', true); 
    }); 
}); 

FIDDLE

Answer 2

생각해 보면 간단합니다. 그냥 모든 라디오 버튼을 change 이벤트로 설정 한 다음 특정 라디오 버튼을 사용 중지하기 만하면됩니다.

다음은 JS에게의

jQuery('.my-radio').change(function() { 
    jQuery('.my-radio').prop('disabled', false); //<---here 
    // Disable all elements associated to value 
    var associates = jQuery('.my-radio[value="' + jQuery(this).val() + '"]').not("#" + jQuery(this).attr('id')); 
    associates.prop('disabled', true); 
}); 

참고 :

당신은 모든 동료를 얻을 수 each 루프를 사용할 필요가 없습니다. associate 변수에는 이미 모든 요소가 있습니다. 그리고 여기에 fiddle at jsFiddle.net

Answer 3

코드에 좀 더 리팩토링이다 :

$('.my-radio').change(function() { 
    //enable all radio buttons 
    $(".my-radio").prop("disabled", false); 
    // Disable all elements associated to value 
    $('.my-radio[value="' + this.value + '"]').not(this).prop('disabled', true); 
}); 

Answer 4

이 당신이 찾고있는 무슨 수 있습니다 :

$('.my-radio').click(function() { 
    // When a radio button is clicked 
    $('.my-radio').each(function() { 
     // Enables all radios buttons 
     $('.my-radio').prop('disabled', false); 
    }); 

    // Disables all radio buttons with same value as this, except this one 
    $('input[value="' + $(this).val() + '"]').not(this).prop('disabled', true); 

});