Question

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

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

Answer 1

不要一直走到父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>

Answer 2

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

var chx = $('input[type="checkbox"]');       // Store the elements
chx.change(function(){                       // Set the event listener
    var i = chx.index(this);                 // Get the index of the clicked element
    $(chx[i + 1]).prop('disabled', function(i, val){
        return !val;                         // Return the opposite state of the element indexed after the triggered element
    });
});

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

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

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;
    });
});

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

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

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

2 个答案: