jQuery + GWT 设置复选框状态答案

【问题标题】：jQuery + GWT set checkbox statusjQuery + GWT 设置复选框状态
【发布时间】：2012-03-12 16:32:59
【问题描述】：

使用 UI:Binder。

复选框的实现如下：

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" ui:field="uniqueID" class="custom" />
<label for="uniqueID"><ui:text from="{res.text}"></ui:text></label>
</fieldset>
</div>

并且 checkboxNewsletter.setId("uniqueID");，因为很遗憾你不能同时设置 ui:field 和 ID。

我尝试用

设置复选框

@UiField InputElement checkbox;
checkbox.setChecked(true);

这没有用。所以我尝试使用 JSNI 直接访问 jQuery-JS：

public static native void setCheckBoxStatus(String id, Boolean isChecked)/*-{
        $wnd.jQuery('input[name='+id+']').attr('checked', isChecked);
}-*/;

...效果也好不到哪里去。

有人知道如何解决这个问题吗？ jQuery 似乎覆盖了 GWT 复选框；生成的 HTML 有点奇怪，似乎由两个复选框元素组成。删除 jQuery 覆盖时，您可以看到原始（并正确检查）元素。

【问题讨论】：

标签： jquery gwt mobile input checkbox

【解决方案1】：

混合使用 jQuery 和 GWT 是个坏主意！使用 GWT，您应该主要针对 GWT DOM API 使用 Java 代码。您是对的，您不能通过 UIBinder 在元素上设置 ID 和 ui:field，但这不是问题的根本原因。

您为视图提供的代码 sn-p 无法编译。您需要指定一个带有注解的字段，如下所示：

@UiField
CheckBox checkbox;

然后在方法体内，设置检查状态：

// setValue sets the checked state, true = checked, false = unchecked.
checkbox.setValue(true);

【讨论】：

setValue 与 setChecked 基本相同，当然已经尝试过（CheckBox 以及 InputElement）。这里的问题是 jQuery 似乎有点用 jQuery 的 HTML/CSS 覆盖了 GWT 内部的复选框。因此，setValue 方法不会正确显示在屏幕上。

【解决方案2】：

当您在 jQuery 中使用 GWT 时，您应该使用 GWTQuery (http://code.google.com/p/gwtquery/ )，它封装了 jQuery 的功能，您可以直接在您的 java 代码中访问它.但是，这对 UiBinder 没有帮助。

这是您使用 GWT UiBInder 定义复选框的方式：

<g:CheckBox ui:field="uniqueID"></g:CheckBox>

在你的 uiBinder xml 文件中和

@UiField 
CheckBox uniqueID;

在你的代码行为中。

如果您使用的是 eclipse，您可以使用设计器在布局中拖放不同的元素并将不同的元素定义在一起。本文介绍了 UiBinder 的不同特性。

PS：如果您希望在初始化时检查您的复选框，您可以写：<g:CheckBox checked="true" ui:field="uniqueID"></g:CheckBox>

【讨论】：