@Html.CheckBoxFor와 함께 작동하도록 Materialize CSS 체크박스를 구현하는 방법

문제 상황

ASP.NET MVC에서 @Html.CheckBoxFor 헬퍼를 사용하면 뷰가 렌더링될 때 실제 체크박스(input type="checkbox") 외에도, 폼 제출 시 값이 누락되지 않도록 하는 숨겨진 input(type="hidden")이 자동으로 함께 생성됩니다. 그런데 Materialize CSS는 label과 input 요소의 DOM 배치 순서에 매우 민감하기 때문에, 이 숨겨진 요소가 체크박스보다 앞쪽에 위치하면 스타일이 깨지면서 체크박스가 화면 왼쪽으로 밀려나거나 아예 사라지는 현상이 발생합니다.

해결 방법: 숨겨진 요소를 부모 요소의 맨 아래로 이동

가장 간단하고 확실한 해결책은 jQuery를 이용해 숨겨진 input 요소를 부모 요소의 마지막 자식으로 이동시키는 것입니다.

$("input[type='hidden']").each(function (index, element) {
    $(this).appendTo($(element).parent());
});

이 코드는 문서 내 모든 type="hidden" input을 찾아 각각의 부모(parent) 요소 안에서 가장 마지막 위치로 옮깁니다. 그 결과 Materialize CSS가 기대하는 DOM 구조와 일치하게 되어, 체크박스가 왼쪽으로 밀려나거나 사라지는 문제 없이 정상적으로 표시됩니다.

적용 시 주의사항

• 위 코드는 $(document).ready() 안에서 실행하거나, DOM이 완전히 로드된 이후에 실행해야 합니다.
• 페이지에 다른 용도의 hidden 필드가 많다면, 특정 컨테이너나 클래스로 선택자 범위를 좁히는 것이 좋습니다. 예: $(".checkbox-container input[type='hidden']")
• Ajax로 폼을 동적으로 다시 그리는 경우에는 갱신 후 위 코드를 다시 한번 호출해야 합니다.

요약하면, @Html.CheckBoxFor가 자동으로 생성한 숨겨진 요소를 부모 요소의 맨 아래로 이동시키는 것만으로 Materialize CSS 체크박스를 정상적으로 동작시킬 수 있습니다.