[javascript] jQuery/jstl/forEach문 input checkbox fucus() 안될 때

■ input focus() 안먹을때

<dt>forEach문 사용하여 checkbox 여러개 만들기</dt>
<dd>
  <c:forEach items="${list}" var="list">
    <c:if test="${list.num >= 1}">
      <c:set var="cnt" value="${cnt+1 }"></c:set>
      <span> 
        <input type="checkbox" id="box${cnt}" name="checkBox" value="${list.num}"> 
        <label for="box${cnt}">${list.num}번</label>
        <c:if test="${list.num eq 10}">
           <input type="text" id="textbox" name="textbox" maxlength="50">
        </c:if>
      </span>
    </c:if>
  </c:forEach>
</dd>

1. controller 에서 데이터를 담아둔 " list " 를 가져와 변수명(var)을 지정해준다.
2. 1~9번까지는 체크박스만, 10번은 text input 까지 생성하도록 조건을 준다.
3. id명도 box1~box10으로 만들기 위해 변수명(var)을 지정해주고 1씩 증가되는 value를 설정해준다.
4. forEach문에 의해 체크박스 10개가 생성된다.
5. list에 들어있는 num의 값이 10일 때, 최대입력가능글자 50자리의 text input이 생성된다.

위와 같이 forEach문을 사용해 여러체크박스를 만들었는데,
저 체크박스에 focus()가 먹지 않는 현상이 발생.
(참고로 제이쿼리를 사용했고, PC에서는 정상작동, 모바일뷰에서 문제발생)

결국 원인을 못 찾았고,
계속 구글링하다가 아래 코드를 추가해 해결했다.

■ 해결방법

<div class="listFocus" id="listFocus" tabindex="0" style="outline: none;"></div>

나는 타이틀dt 아래에 추가해서 사용했다.

<dt>forEach문 사용하여 checkbox 여러개 만들기</dt>
<!-- here -->
<div class="listFocus" id="listFocus" tabindex="0" style="outline: none;"></div>
<dd>
  <c:forEach items="${list}" var="list">
    <c:if test="${list.num >= 1}">
      <c:set var="cnt" value="${cnt+1 }"></c:set>
      <span> 
        <input type="checkbox" id="box${cnt}" name="checkBox" value="${list.num}"> 
        <label for="box${cnt}">${list.num}번</label>
        <c:if test="${list.num eq 10}">
           <input type="text" id="textbox" name="textbox" maxlength="50">
        </c:if>
      </span>
    </c:if>
  </c:forEach>
</dd>

저 라인 그대로 쓰고 class명과 id만 잘 바꿔 쓰면 될듯