jQuery Mobile複選框取消選中

我有以下代碼設置爲jQuery移動1.0.1中的複選框，這是在Android設備上產生奇怪的行爲。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>

根據頁面可能會有多個「List」div，但行爲是相同的。如果用戶按下標籤標籤中的任何地方，一切都可以正常工作，但如果按下jquery mobile生成的複選框圖標，它將顯示爲選中狀態，然後立即取消選中它自己。這隻發生在Android設備上。

編輯：

我最終通過刪除複選框圖標jQuery Mobile的解決了這個通過CSS增加了，並把我自己的圖標進入標籤的複選框的背景圖像。我在複選框的更改事件中處理選中和未選中之間的切換。感謝所有的建議。

來源

2012-04-17 Ross

你使用的是什麼版本的jQuery Mobile？ – Jasper 2012-04-17 22:12:24

此外，您的ID不是有效的HTML標識符，更多信息在這裏：http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – Jasper 2012-04-17 22:20:15

它的版本1.0 0.1。這些ID實際上更像「Team-1-Player-1」。我縮短了他們的這篇文章。我會編輯它，謝謝。 – Ross 2012-04-17 22:24:18

看我的編輯我做了什麼。這是代碼。

在CSS刪除JQMs複選框圖標：

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

然後爲我定製的檢查類和未選中圖標：

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

然後我編輯我的標籤，標籤包括這些類：

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

並且綁定切換到輸入的切換事件改變事件：

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

這是一個醜陋的解決方法，我知道，但我無法弄清楚源代碼問題，至少現在它起作用。

來源

2012-04-18 23:13:51 Ross

你有試過版本1.1.0嗎？我認爲這個版本在android上效果更好。也許這個問題自己解決

來源

2012-04-18 07:22:21 Flow

我做了，但沒有奏效。我做了一個解決方法，我編輯到我的文章。不過謝謝。 – Ross 2012-04-18 23:05:04

jQuery Mobile複選框取消選中

回答

相關問題