Jquery Mobile 1.2多复选框选择问题

Question

我正在编写一个Jquery Mobile 1.2，Jquery 1.8.2，css和基于HTML 5的应用程序，我需要允许用户选择多个图像并执行命令。

，如果我不使用jquery.mobile-1.2.0.min.js库中的以下作品：

CSS代码：

.image-checkbox-container input[type="checkbox"]{ 
    display: none; 
} 

.image-checkbox-container img{ 
    border: 0; 
    margin: 4px; 
} 

HTML：

<span class="image-checkbox-container"> 
    <input type="checkbox" name="black-box" value="1" /> 
<img src="dummyimage1.jpg" /> 
</span> 
<span class="image-checkbox-container"> 
    <input type="checkbox" name="red-box" value="1" /> 
    <img src="dummyimage2.jpg" /> 
</span> 
<span class="image-checkbox-container"> 
    <input type="checkbox" name="green-box" value="1" /> 
    <img src="dummyimage3.jpg" /> 
</span> 

的JQuery ：

$('.image-checkbox-container img').live('click', function(){ 
    if(!$(this).prev('input[type="checkbox"]').prop("checked")){ 
    $(this).prev('input[type="checkbox"]').prop("checked", true); 
    this.style.border = '4px solid #38A'; 
    this.style.margin = '0px'; 
}else{ 
     $(this).prev('input[type="checkbox"]').prop("checked", false); 
    this.style.border = '0'; 
    this.style.margin = '4px'; 
} 
}); 

只要我将jquery.mobile-1.2.0.min.js库添加到代码中，它就不能正常工作了。取消选中/取消选择复选框不起作用。

我试图使用checkboxradio（“刷新”），但没有任何运气。

任何建议将不胜感激。

感谢

Answer 1

怎么样使用一个CSS的解决方案？

添加另外这个自定义CSS：

.checked { 
    border : 4px solid #38A!important; 
    margin : 0px!important; 
} 

，并使用这个脚本：

<script> 
    $('.image-checkbox-container img').live('click', function(){ 
    $this=$(this); 
    if($this.hasClass('checked')===true){ 
     $this.removeClass('checked'); 
    }else{ 
     $this.addClass('checked'); 
    } 
    }); 
    </script>