jquery - 段落ID中每个子复选框的jQuery

Question

如何在名为 id="Paragraph1" 的段落中选择每个子复选框，如果选中则取消选中它，然后在 jQuery 中禁用它。

例子：

<input type="checkbox" id="chkMain"><br />
<p id="Paragraph1">
    <input type="checkbox" id"chk1"><br />
    <input type="checkbox" id"chk2"><br />
    <input type="checkbox" id"chk3"><br />
    <input type="checkbox" id"chk4"><br />
</p>

jQuery选择：

$("#chkMain:not(:checked)").change(function() {
    $("#Paragraph1").children("input[type='checkbox' :checked]").each(function() {
        $(this).removeAttr("checked").attr("disabled",disabled");     
    });
});

此代码无法正常工作 b/c 由于某种原因在 IE8 中只能工作一半时间。同样使用 find 也不能正常工作，也许 b/ca 段落不是一个好父母。

Answer 1

input[type='checkbox' :checked]不是正确的选择器。

它应该是：

input[type='checkbox']:checked

而且我认为您可以简化代码，例如：

$('#Paragraph1 input[type="checkbox"]:checked')  // select all checked input
                    .removeAttr('checked')       // remove checked attribute
                    .prop('disabled', true);     // make em disabled

Answer 2

替换所有这些：

$("#Paragraph1").children("input[type='checkbox' :checked]").each(function() {
   $(this).removeAttr("checked").attr("disabled",disabled");     
  });

有了这个：

 $("#Paragraph1 input[type='checkbox']:checked")
     .prop('checked', false)
     .prop('disabled', true);

• each当您想要对集合中的每个元素执行 jQuery API 不可用的操作时，您应该使用它，例如alert或发送 AJAX 请求。

• 尽可能使用prop，不要乱用属性。

• CSS 选择器中的空格表示“子级”，因此删除空格:checked并在 Paragraph1 和输入之间添加空格。对于直接孩子，您可以使用parent > children

像这样：

$("#Paragraph1 > input[type='checkbox']:checked")
     .prop('checked', false)
     .prop('disabled', true);

Answer 3

您的代码中有几个语法错误，您可以使用prop方法：

$("#chkMain").change(function() {
     $("#Paragraph1 input[type='checkbox']")
              .prop('checked', this.checked) 
              .prop('disabled', !this.checked)
});