Question

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

Answer 1

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

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

（我使用的是更改而非点击，因为它更通用。）只连接第一个元素而不是整个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

Answer 2

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

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

Answer 3

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

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

3 个答案: