构建 jquery 复选框 - 无法设置选中值

Question

这看起来很简单，我不知道这是一个错误，还是我做错了什么。

我要做的是在 jquery 中构建一个复选框输入，然后返回输入的字符串。我有这个代码：

var obj = $('<input>');
obj.attr('disabled', 'disabled');
obj.attr('type', 'checkbox');
obj.attr('checked', 'checked'); // this does not work!

无论我如何尝试渲染这个 obj，'checked' 属性永远不会被输出。

所以我试过了：

$('<div>').append(obj).remove().html();

然后它返回：

<input type="checkbox" disabled="disabled" />

我已经尝试设置一个 id 属性，它没有任何区别。我也试过这个，但它不起作用：

obj.attr('checked', true);

有什么建议可以让输入标签的checked属性设置为'checked'（通过jquery）？

我意识到我可以通过字符串连接来做到这一点，但现在我真的很想知道为什么它没有按应有的方式工作。

编辑

您可以在 firebug 中自己尝试一下。以我的方式或 cletus' 的方式创建 obj，然后尝试将其呈现为字符串。你会发现 'checked' 属性永远不会被渲染。

Answer 1

这对我有用：

$("<input>").attr({
  type: "checkbox",
  disabled: true,
  checked: true
}).appendTo("body");

在 FF 3.6、Chrome 4 和 IE 8（兼容）中测试。

Answer 2

你是对的，“checked”属性有些奇怪。好像只有在浏览器实际渲染后才生效。 （而不是仅仅在一个片段中。）

例如，使用您的代码，

var obj = $('<input />');
obj.attr('disabled', 'disabled');
obj.attr('type', 'checkbox');
obj.attr('checked', 'checked');
var wrapper = $('<div />').append(obj);
alert(wrapper.html());       // notice, no checked attr in this string...
$('body').prepend(obj);      // but now notice, it IS checked when it's drawn!

我知道这本身并不是真正的“答案”，但想让您知道您不会发疯。我也很想知道为什么会这样。

祝你好运！

Answer 3

据我所知，唯一可以让您将整个 HTML 对象作为字符串返回的方法是使用 outerHTML 技巧：

jQuery.fn.outerHTML = function () {
    return $('<div>').append(this.eq(0).clone()).html();
};

那么，简单

$("<input>").attr({
  type: "checkbox",
  disabled: true,
  checked: true
}).outerHTML();

会给你完整的字符串。

Answer 4

你试过了吗

obj.attr('checked');

并不想开玩笑。只是真的想知道它是否对他有任何帮助。

我想你是对的。我从来没有考虑过，因为 jQuery 在:checked 选择器中有一个内置的解决方法，所以它从来都不是问题。