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 / c段落不是好父母。

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);

当您想要在集合中的每个元素上执行jQuery API不可用的操作时，您应该使用each，例如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)
});

段落id中每个子复选框的jQuery

3 个答案: