4

我有一些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;
});

以这种方式启用了两个复选框，但是当我单击第一个复选框时，不会出现检查并且没有任何反应。

 <div class="elements">
 <div class="class3">
 <input class="class1" type="checkbox" value="1" name="first" id="first" />
 </div>
 <div class="class3">
 <input class="class2" type="checkbox" value="1" name="second" id="second" />
 </div>
 </div>
4

3 回答 3

1

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

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

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

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

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

编辑 在您更新的帖子中看到 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

于 2012-06-28T08:45:10.637 回答
0

当您return false;阻止该事件的默认行为发生时；在单击复选框的情况下，默认行为是选中复选框。只需删除它，return false;因为它对您没有任何好处。

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

于 2012-06-28T08:23:38.620 回答
0 
$('.class1').live('click', function () {
    var n = $(this).siblings('input:checkbox');
    if ($(this).attr('checked')) {
        n.prop('disabled', true); 
    } else {
        n.prop('disabled', false);
    } 
});
于 2012-06-28T08:23:44.377 回答