내부 포장 <% = f.check_box %><label>

Question

양식에 체크 박스 목록이 있습니다. CSS가 구성되는 방식 때문에 레이블 요소는 직접 스타일이 지정됩니다. 이를 위해서는 태그 안의 확인란을 중첩해야합니다.

이것은 원시 HTML에서 작동하며 레이블 텍스트를 클릭하면 확인란의 상태가 변경됩니다. 하지만 숨겨진 입력 태그를 먼저 출력하기 때문에 도우미 <%= f.check_box %> 도우미와 함께 작동하지 않습니다. 나에게주는이이 레일 무엇

<label> 
    <input type="checkbox" ... /> 
    <input type="hidden" ... /> 
    Foo 
</label> 

...하지만 됩니다 :

<label> 
    <input type="hidden" ... /> 
    <input type="checkbox" ... /> 
    Foo 
</label> 

요약

,

<label> 
    <%= f.check_box :foo %> 
    Foo 
</label> 

이

은 내가을 원하는 출력

레이블 동작이 작동하지 않습니다. lly 일 :(.

이 문제를 해결할 수있는 방법이 있습니까?

Answer 1

레일즈는 확인란이 선택되지 않은 상태로 제출되었는지 여부를 알 수있는 방법이 필요하기 때문에 확인란 앞에 숨겨진 입력을 생성합니다. 의 순서는입니다. 확인란을 선택하면 숨겨진 입력이 무시되므로 무시됩니다. 자세한 내용은 Rails API을 참조하십시오.

라벨 태그에 체크 상자를 포장하는 대신 <label for="checkbox_id">을 사용해야합니다.

Answer 2

이것은 label 태그를 사용하는 방법이 아닙니다. 체크 박스 요소의 레이블로

<input type="hidden" ... /> <!-- doesn't really matter where these are --> 

<label for="id_of_element">Foo</label> 
<input type="checkbox" id="id_of_element" ... />

이제 "푸"행위를하고 확인하거나 선택을 취소 "푸"를 클릭 할 수 있습니다 : 대신에 다음과 같이 사용하십시오.

Answer 3

이 나를 위해 작동합니다

<%= f.label :foo do %> 
    <%= f.check_box :foo %> 
    Foo 
<% end %> 

는 렌더링 :

<label for="foo"> 
    <input name="foo" type="hidden" value="0"> 
    <input checked="checked" id="foo" name="foo" type="checkbox" value="1"> 
    Foo 
</label> 

Answer 4

이 내가 그 번역을 포함 사용하는 솔루션입니다.

en: 
    helpers: 
    label: 
     foo: Foo