2012-04-17 3 views
0

다음 코드를 Android 디바이스에서 이상한 동작을 일으키는 jQuery 모바일 1.0.1의 체크 박스 목록으로 설정했습니다.jQuery Mobile 체크 박스 자체 선택을 취소합니다

<fieldset data-role="controlgroup"> 
     <div id="container"> 
      <div id="List1"> 
      <input type="checkbox" name="1" id="Team-1-Player-1" data-theme="a"/> 
      <label for="1" data-theme="a"> 
       <span class="ui-grid-b grid"> 
        <span class="ui-block-a col1">1</span> 
        <span class="ui-block-b col2">Name <span class="pos">Position</span></span> 
        <span class="ui-block-c col3">Avg</span> 
       </span> 
      </label> 
      <input type="checkbox" name="2" id="Team-1-Player-2" data-theme="a"/> 
      <label for="2" data-theme="a"> 
       <span class="ui-grid-b grid"> 
        <span class="ui-block-a col1">2</span> 
        <span class="ui-block-b col2">Name <span class="pos">Position</span></span> 
        <span class="ui-block-c col3">Avg</span> 
       </span> 
      </label> 
      </div> 
     </div> 
    </fieldset> 

페이지에 따라 여러 개의 '목록'div가있을 수 있지만 동작은 동일합니다. 사용자가 레이블 태그 내의 아무 곳이나 누르면 모든 것이 잘 작동하지만 jquery mobile에 의해 생성 된 확인란 아이콘을 누르면 체크 표시가 나타나고 즉시 선택이 취소됩니다. 이것은 Android 기기에서만 발생합니다.

편집 :

내가 결국 체크 박스 아이콘 JQuery와 모바일을 제거하여이 문제를 해결 CSS를 통해 추가하고 체크 박스의 라벨의 배경 이미지로 내 자신의 아이콘을 넣어. 체크 박스의 변경 이벤트에서 체크 된 것과 체크되지 않은 것 사이의 전환을 처리했습니다. 모든 제안을 주셔서 감사합니다.

+0

어떤 jQuery Mobile 버전을 사용하고 있습니까? – Jasper

+0

또한 ID가 유효한 HTML 식별자가 아닙니다. 자세한 내용은 http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – Jasper

+0

버전 1.0 .1. ID는 실제로 "Team-1-Player-1"과 유사합니다. 나는이 게시물을 위해 그들을 단축했다. 나는 그것을 고칠 것이다, 고마워. – Ross

답변

0

제가 한 일에 대한 편집을 참조하십시오. 여기에 코드가 있습니다. 이러한 클래스를 포함

.checkon{background-image:url("images/check.png"); background-repeat:no-repeat;} 
.checkoff{background-image:url("images/uncheck.png"); background-repeat:no-repeat;} 

그럼 난 내 레이블 태그 편집 : 내 사용자 정의 만든 확인을위한 클래스와 선택하지 않은 아이콘은 다음

#container label .ui-icon 
{ 
    display:none!important; 
} 

: JQMs 체크 박스 아이콘을 제거하는 CSS에서

<label class="checkoff" for="1" data-theme="a"> 

입력 변경 이벤트를 켜거나 끈다 :

$("#container input").live("change", function (event) { 
      $(this).next().toggleClass("checkoff"); 
      $(this).next().toggleClass("checkon"); 
     }); 

이것은 추악한 해결 방법이지만, 근본 문제를 파악할 수 없어 적어도 현재는 작동합니다.

0

버전 1.1.0을 사용해 보셨습니까? 나는이 버전이 안드로이드에서 훨씬 잘 작동한다고 생각한다. 어쩌면 문제가 해결 될 것입니다

+0

나는 그것을했지만 작동하지 않았다. 내 게시물에 편집 한 해결 방법을 만들었습니다. 그래도 고마워. – Ross