jquery：选中另一个复选框时勾选并禁用复选框

我有一些div。 它们中的每一个都包含两个复选框（每个复选框都在同一个类’class3’的div中）。 我想当用户检查第一个复选框时，会检查并禁用第二个复选框。 我尝试过：

$('.class1').live('click', function () { var n = $(this).siblings('input:checkbox'); if ($(this).attr('checked')) { n.attr('disabled', true); } else { n.attr('disabled',false); } return false; }); 

这样就启用了两个复选框，但是当我点击第一个复选框时，检查不会出现，也没有任何反应。

Answer 1

您可以使用以下内容将事件附加到class1的div的每个第一个复选框：

  $('.class1 input:first-child').live('change', function () { 

（我使用了更改而不是单击，因为它更通用。）只附加第一个元素而不是整个div确保您只在需要时做出反应。

在您使用它之前禁用它应该可以工作，但兄弟姐妹只有在您的第一个复选框没有嵌套在另一个元素内时才会起作用（例如段落）

示例小提琴： http ： //jsfiddle.net/Zqz63/

编辑看到你更新的post中的html，兄弟姐妹确实不会工作，你可以在父链中查找.elements div并查看那里的复选框（除了选中）

  var n = $(this).parents('.elements').find('input:checkbox').not(this); 

jsfiddle没有响应，所以我把样本移到jsbin： http ：//jsbin.com/ahemet/3/edit（注意，在当前的jsbin版本中没有正确选择的第一个复选框，所以事件将也点击第二个复选框，但我认为这超出了你的问题的范围）

编辑2使用class1始终是第一个复选框的信息，class2始终是第二个：

 $('input:checkbox.class1').live('change', function () { var n = $(this).parents('.elements').first().find('input:checkbox.class2'); if ($(this).attr('checked')) { n.attr('checked',true); n.attr('disabled', true); } else { n.attr('disabled',false); } }); 

测试： http ： //jsbin.com/ahemet/4/edit

Answer 2

 $('.class1').live('click', function () { var n = $(this).siblings('input:checkbox'); if ($(this).attr('checked')) { n.prop('disabled', true); } else { n.prop('disabled', false); } }); 

Answer 3

当你return false; 您可以防止发生该事件的默认行为; 在单击复选框的情况下，默认行为是选中复选框。 只需删除return false; 因为它对你没什么好处。

另外， disabled是元素的属性 ，因此您应该使用.prop()函数来设置/修改其值，而不是.attr()函数。