레일 : 두 개의 라디오가 동일한 소스 목록에서 선택

Question

어떻게 접근해야하는지 궁금합니다 ... 목록에서 옵션을 선택하기위한 양식에 대해 희망적이고 시각적 인 UI를 시각화하는 데 가장 좋은 그림을 보는 것이 가장 좋습니다. 사용자는 첫 번째 선택 및 두 번째 선택 각 옵션을 만들 수 있어야합니다. 각 열에서 단 하나만 선택할 수 있으며, 각 행마다 하나씩 선택할 수 있습니다.

내가 생각했던 처음에, 자연적으로,이 라디오 버튼 그룹이 작동 할 수도 있습니다 ...하지만 확실하지 어떻게? 아마도 radio_button의 value이 각 div의 click 이벤트에서 Javascript/JQuery를 통해 조작됩니다. 이벤트는 사용자가 두 옵션 모두에 대해 동일한 옵션을 선택하려고 할 때 "충돌"을 확인/처리해야합니다.

또는 두 개의 숨겨진 ... 또는 더 단순한 두 개의 숨겨진 text_fields ...이 더 좋을까요? 자바 스크립트가 선택한 옵션의 ID로 채울 수 있습니까?

어쩌면 나는 더 명백한 것을 간과하고있을 것입니다.

나는 (조언자/검증을 찾고있는 레일즈와 javascripting하기에 새로운).

감사합니다.

HTML :

<form> 
    <p class="exclusiveSelection"> 
     Selection One 
     <input type="radio" name="firstColumn"/> 
     <input type="radio" name="secondColumn"/> 
    </p> 
    <p class="exclusiveSelection"> 
     Selection Two 
     <input type="radio" name="firstColumn"/> 
     <input type="radio" name="secondColumn"/> 
    </p> 
    <p class="exclusiveSelection"> 
     Selection Three 
     <input type="radio" name="firstColumn"/> 
     <input type="radio" name="secondColumn"/> 
    </p> 
    <input type="button" id="submitForm" value="Submit"> 
</form> 

자바 스크립트 :

$(function() { 
    $(".exclusiveSelection input[type='radio']").click(function() { 
     $exclusiveSelection = $(this).parent(); 
     $('input[type='radio']', $exclusiveSelection).attr('checked', false); 
     $(this).attr('checked', true); 
    }); 
}); 

그것은 값이 컬럼에서 고유 보장

Answer 1

나는 이런 일이 당신이 찾고있는 무엇을 생각 jQuery 1.2.6 - 1.7.1을 사용하여 행을 만들고 작동합니다. JSFiddle example도 있습니다.

레일스 용으로이 기능을 적용하는 데 도움이 필요하면 알려 주시기 바랍니다.