Jquery 最近的选择器影响多个元素

我有一个asp.net应用程序，它使用了一个网格控件，该控件具有三个并列的复选框列。第一列中的框已启用；接下来的两个被禁用。我尝试编写一个JQuery函数，当用户选中第一列中的复选框时，该函数将启用第二列中相邻的复选框。这是我的密码：

<script type="text/javascript">
        $(document).ready(function() {
            $("[id$='FirstCheckBox']").click(function() {
                var td = $("td", $(this).closest("tr"));
                if ($(this).is(":checked")) {
                    $("input[type=checkbox]", td).prop("disabled", false);
                }
                else {
                    $("input[type=checkbox]", td).prop("disabled", true).prop("checked", false);
                    $(this).prop("disabled", false);
                }    
            });
        });
    </script>

$（文档）.ready（函数（）{
$（“[id$='FirstCheckBox']”）。单击（函数（）{
var td=$（“td”，$（此）；
如果（$（this）.is（“：checked”））{
$（“输入[type=checkbox]”，td）.prop（“禁用”，false）；
}
否则{
$（“输入[类型=复选框]”，td）.prop（“禁用”，true）.prop（“选中”，false）；
$（此）.prop（“已禁用”，false）；
}    
});
});

---

当我只有两个复选框列时，此函数工作正常。但是，当我添加带有禁用复选框的第三列时，该函数也会启用该列中的复选框。我认为最近的选择器只选择一个元素，但它似乎选择了两个。我做错了什么？

不要一直上到父元素

tr

元素，只需上到最近的

td

并使用jQuery

next（）

方法查找下一个单元格即可

您可以通过将代码更改为以下内容来概括这一点：

<script type="text/javascript">
    $(document).ready(function() {
        $("#tableId").on('click', 'input:checkbox:not(:disabled)', function() {
            var $nextTd = $(this).closest("td").next('td');
            if (! $nextTd.length) { return; } // already in last column
            if ($(this).is(":checked")) {
                $("input[type=checkbox]", $nextTd).removeProp("disabled");
            }
            else {
                $("input[type=checkbox]", $nextTd)
                    .prop("disabled", 'disabled')
                    .removeProp("checked");
                $(this).removeProp("disabled");
            }    
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#tableId”）。在（'click'、'input:checkbox:not（：disabled'）上，函数（）{
var$nextTd=$（this）.closest（“td”）.next（“td”）；
如果（！$nextTd.length）{return；}//已在最后一列中
如果（$（this）.is（“：checked”））{
$（“输入[type=checkbox]”，$nextTd）.removeProp（“禁用”）；
}
否则{
$（“输入[type=checkbox]”，$nextTd）
.prop（“禁用”、“禁用”）
.removeProp（“选中”）；
$（此）.removeProp（“禁用”）；
}    
});
});

如果将复选框映射到元素对象数组中，并使用数组中的索引控制要启用/禁用的复选框，该怎么办。 我是这样想的：

它的优点是短而甜，并允许您通过索引而不是条件进行控制。我想如果你想进一步控制，你也可以添加条件

下面是一个使用条件限制数组中某些元素功能的示例。这一个限制了事件在第一个事件之后发生在数组中的任何元素上

var chx = $('input[type="checkbox"]');
chx.change(function(){
    var i = chx.index(this);
    if(i == 0){
        $(chx[i + 1]).prop('disabled', function(i, val){
            return !val;
        });
    }
});

这是一个更短的版本，因为您只需要将它应用于第一个复选框，但它仍然允许您跳过DOM遍历

var chx = $('input[type="checkbox"]');
$(chx[0]).change(function(){
    $(chx[1]).prop('disabled', function(i, val){
        return !val;
    });
});

我还更新了小提琴以反映这一变化

---

希望这有帮助！如果您有任何问题，请告诉我。

可以在问题中包含

html

？给定

$（选择器）。最近的（某物）

，如果

selector

包含多个元素，它将找到与每个元素最接近的

某物

，因此如果您的选择器有n个元素，

最近的

将返回最多n个元素<代码>$（“td”，“$（this）.最近的（“tr”）这是导致问题的原因，因为它返回多个

tds

您可以添加JSFIDLE吗？您可以添加相关的HTML和CSS以便重现您的问题吗，更容易回答吗？这几乎起作用了，只是当单击第二列中的复选框时，它会启用第三列中的复选框，而我不希望这样做。我尝试在函数上设置如下条件：if（$（this）.id$='FirstCheckBox'）{…但无法识别。条件语法是否错误？当然，我会检查一下，看看是否可以停止。

var chx = $('input[type="checkbox"]');
$(chx[0]).change(function(){
    $(chx[1]).prop('disabled', function(i, val){
        return !val;
    });
});