防止jquery mobile设置元素样式答案

【问题标题】：prevent jquery mobile from styling element防止jquery mobile设置元素样式
【发布时间】：2011-11-08 21:49:36
【问题描述】：

我有一个要隐藏在页面上的复选框。我明显的第一次尝试如下：

<input type='checkbox' style='display:none' />

但是，我注意到 jquery mobile 自动将复选框包装在一个看起来像这样的 div 中：

<div class='ui-checkbox'>
  <input type='checkbox' style='display:none;' />
</div>

我假设有某种data- 元素会阻止这种额外的样式，但在文档或其他地方没有找到它。在 css 中覆盖 .ui-checkbox 以隐藏它也很容易，但更喜欢 jquery 移动标准方法。有这种事吗？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

阻止样式的属性是data-role="none"

<input type='checkbox' style='display:none' data-role="none" />

参见Jquery doc：“防止表单元素的自动初始化”

【讨论】：

又好又简单.. 在 2015 年仍然是一个有效的解决方案，当前版本 (1.4.5)。 demos.jquerymobile.com/1.4.5/forms/…

【解决方案2】：

供未来的用户使用。

以防万一您想禁用每个表单元素，或者您的表单在无法编辑标记的情况下动态加载，请使用此选项。

        $(document).on('pagebeforecreate', function( e ) {
            $( "input, textarea, select", e.target ).attr( "data-role", "none" );
        });

【讨论】：

对于未来的用户，live() 函数已被弃用，取而代之的是 on 函数，从 jQuery 版本 1.7 开始

【解决方案3】：

我有太多地方要更改输入和添加 data-role="none" 以下代码适用于我：

 <script>
        $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select,input";
        });        
    </script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

【讨论】：