最近选择器影响多个元素
最近选择器影响多个元素
提问于 2015-06-13 12:37:40
我有一个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>当我只有两个复选框列时，这个函数工作得很好。但是，当我添加第三列并禁用复选框时，该函数也会启用该列中的复选框。我认为最近的选择器只选择一个元素，但它似乎选择了两个。我做错了什么？
回答 2
Stack Overflow用户
发布于 2015-06-13 12:46:47
无需一直向上查找父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>Stack Overflow用户
发布于 2015-06-13 13:21:37
如果将复选框映射到element对象的数组中，并使用数组中的索引来控制要启用/禁用哪个复选框，该怎么办？我的想法是这样的：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;
});
});我还更新了小提琴以反映这一变化。
希望这能有所帮助！如果你有任何问题，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30815137
复制相关文章
相似问题
腾讯云开发者
