0

如何在名为 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 段落不是一个好父母。

4

3 回答 3

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
于 2013-02-18T18:19:05.557 回答
1

替换所有这些:

$("#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);
于 2013-02-18T18:21:43.637 回答
1

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

$("#chkMain").change(function() {
     $("#Paragraph1 input[type='checkbox']")
              .prop('checked', this.checked) 
              .prop('disabled', !this.checked)
});
于 2013-02-18T18:22:15.760 回答