JQuery - 设置属性值

Question

我有以下HTML代码，其中有两个元素具有相同的名称

<input type="hidden" name= "chk0" value="">
<input type="checkbox" name="chk0" value="true" disabled>

我想通过 JQuery 启用复选框，所以我正在使用类似于以下的代码：

$('#chk0').attr("disabled",false);

但这并不起作用。 我认为JQuery会混淆两个具有完全相同名称的元素。不幸的是，我不能避免使用两个不同的名称，因为当表单被提交时，我希望所有复选框都被提交（而不仅仅是选中的），因此我必须使用具有相同名称的隐藏元素。 因此，回到问题上，如何在上述情况下通过JQuery启用复选框？ attr是否有“type”参数来区分隐藏和复选框？

谢谢

- Jake

Answer 1

在实际代码之前，有几件事情需要注意：

你在选择器中使用的井号(#)是用来选择ID而不是元素名称。 同时，disabled属性并不是一个真假场景... 如果它有disabled属性，那么它就是true.. 你需要移除属性而不是将其设置为false。 此外，还有表单选择器可以识别表单中特定类型的项目..

所以代码应该是：

$("input:checkbox[name='chk0']").removeAttr('disabled');

---

更新回答

你应该使用 .prop() 方法（自 v1.6 版本开始添加）

$("input:checkbox[name='chk0']").prop('disabled', false); // to enable the checkbox

并且

$("input:checkbox[name='chk0']").prop('disabled', true); // to disable the checkbox

- Gabriele Petrioli

---

jQuery是一种疯狂的方式来做这件事。设置复选框的“disabled”属性为false，有什么比这更简单的呢？ - Tim Down

实际上，这是一个真假情况。jQuery的attr方法设置JS属性而不是HTML属性（除了在一些特殊情况下的权宜之计；它会将HTML属性名转换为JS属性名，但这并不意味着它正在使用属性访问）。 attr('disabled', 'disabled')仅起作用是因为字符串'disabled'是真值; 当你将它赋给布尔属性disabled时，它就像true一样。但是对于'banana'和任何其他非空字符串也是如此。 - bobince

@bobince - 我的经验是 attr('disabled',true) 没有起作用 -- 你认为它应该起作用。有什么想法吗？ - Hogan

我所提到的true false是指你不能通过将disabled属性设置为false来禁用它..你必须完全移除这个属性。而且Vincent明确表示他想通过jQuery来实现。 - Gabriele Petrioli

@Hogan - 如果不使用，那就不用它。$("input:checkbox[name='chk0']")[0].disabled = false; 更好（更快，更清晰，更简单，而且有效）。@gaby - 在这里处理属性是不必要和不可取的，几乎在浏览器脚本编程中也是如此。我建议不使用jQuery的attr() 和相关方法，因为正如@bobince所指出的那样，名称是误导性的，并且实现很容易混淆。没有任何阻止您将DOM调用与jQuery混合使用：请参见我在此评论中早期提供的示例。 - Tim Down

Answer 2

真的，不要使用jQuery来完成这个任务。在自从1997年以来的每个主流浏览器中，disabled是表单元素的一个布尔属性，它完美地实现了作用，而且无论是将一个表单元素禁用还是启用都非常简单直观。

最简单的获取复选框引用的方法是为它设置一个id。下面是我的建议的HTML代码：

<input type="hidden" name="chk0" value="">
<input type="checkbox" name="chk0" id="chk0_checkbox" value="true" disabled>

使复选框启用的JavaScript代码行：

document.getElementById("chk0_checkbox").disabled = false;

如果您喜欢的话，您可以使用jQuery来获取复选框的控制权：

$("#chk0_checkbox")[0].disabled = false;

- Tim Down

---

在使用jQuery时，要善加利用它的优点，不要盲目地到处应用。 - bobince

使用jQuery只是为了选择正确的元素是否有问题？例如，您给两个元素相同的ID，但将它们嵌套在具有不同ID的其他元素中，因此您可以使用$(#parent1 #child)选择一个元素，使用$(#parent2 #child)选择另一个元素。 - BCarpe

@BCarpe：拥有两个具有相同“id”的元素是无效的，应该避免。然而，使用jQuery一次设置多个元素的属性是合理的。我建议在jQuery 1.6中使用$("whatever").prop("disabled", false)。 - Tim Down

Answer 3

"True" 和 "False" 无效，请将其设置为值 "disabled" 以禁用。

$('.someElement').attr('disabled', 'disabled');

要启用，请移除。

$('.someElement').removeAttr('disabled');

此外，不必担心多个项目被选择，jQuery 将对所有匹配项进行操作。如果只需要一个，可以使用 :first、:last、nth 等多种方法。

您正在使用 name 而非 id，就像其他人提到的一样——请记住，如果使用 id，则有效的 XHTML 要求 id 必须是唯一的。

- Hogan

---

attr不会做你以为它会做的事情。 - bobince

Answer 4

$("#chk0") 是指具有id为chk0的元素。您可以尝试给元素添加id。尽管名称相同，但ids是唯一的，因此在jQuery中，您可以通过其id访问单个元素。

- Vincent Ramdhanie

---

+1 这种方法更简单，比 :checkbox 选择器快得多，后者是非标准的（强制 jQuery 使用缓慢的 Sizzle 选择器引擎而不是浏览器的快速 querySelectorAll 方法）。 - bobince

Answer 5

使用ID来唯一标识复选框。您当前的示例正在尝试选择ID为“＃chk0”的复选框：

<input type="checkbox" id="chk0" name="chk0" value="true" disabled>

$('#chk0').attr("disabled", "disabled");

您还需要删除disabled属性以启用复选框。类似于以下内容：

$('#chk0').removeAttr("disabled");

查看removeAttr文档

用于禁用/启用输入元素的XHTML值如下：

<input type="checkbox" id="chk0" name="chk0" value="true" disabled="disabled" />
<input type="checkbox" id="chk0" name="chk0" value="true" />

请注意，正是缺少禁用属性使输入元素处于启用状态。

- leepowers

---

在同一文档中为两个不同元素使用相同的ID是无效的HTML。 - Tim Down

Answer 6

你可以添加不同的类别来选择，或者像这样按类型选择：

$('input[type="checkbox"]').removeAttr("disabled");

- honeybuzzer