javascript - 如果选中复选框，则按顺序启用 Checkbox1

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