Question

我想制作一个过滤器，如果第1列选中了checkbox1，那么应该启用第2列的checkbox1，反之亦然，这里它会让你更清楚我的实验， 以及我的问题是，如果我取消选中第1列中的任何复选框，则第2列中的所有复选框都将取消选中而不是反之亦然

HTML

<ul>
<h1>Column1</h1>
<li><input type="checkbox" class="filter" checked /> filter1</li>
<li><input type="checkbox" class="filter" checked /> filter2</li>
<li><input type="checkbox" class="filter" checked /> filter3</li>
<li><input type="checkbox" class="filter" checked /> filter4</li>
<li><input type="checkbox" class="filter" checked /> filter5</li>
<li><input type="checkbox" class="filter" checked /> filter6</li>
</ul>
<form action="#" method="post">
<ul>
<h1>Column2</h1>
<li><input class="checkbox" type="checkbox" checked /> checkbox1</li>
<li><input class="checkbox" type="checkbox" checked /> checkbox2</li>
<li><input class="checkbox" type="checkbox" checked /> checkbox3</li>
<li><input class="checkbox" type="checkbox" checked /> checkbox4</li>
<li><input class="checkbox" type="checkbox" checked /> checkbox5</li>
<li><input class="checkbox" type="checkbox" checked /> checkbox6</li>
</ul>
</form>

jquery的

$('.filter').click(function () {
    //check if checkbox is checked
    if ($(this).is(':checked')) {

        $('.checkbox').removeAttr('disabled'); //enable input

    } else {
        $('.checkbox').attr('disabled', true); //disable input
    }
});

http://jsfiddle.net/tuttu88/mdwqvsvr/1/

Answer 1

您可以使用单击复选框的父级索引以及eq选择器来定位其他列表中所需的复选框：

$('.filter').click(function () {
  if ($(this).is(':checked')) {
     $('.checkbox').eq($(this).parent().index()-1).removeAttr('disabled'); //enable input
 } else {
     $('.checkbox').eq($(this).parent().index()-1).attr('disabled', true); //disable input
}});

<强> Working Demo

如果选中Checkbox1，则按顺序启用Checkbox1

1 个答案: