javascript - jquery 中的复选框依赖关系

Question

我正在尝试实现各个复选框之间的依赖关系，但是，我有一个简单的场景，如果取消选中 和 复选框，则其他复选框也应该按升序取消选中。让第一个复选框有id=1，我总共有5个复选框，如果第一个复选框未被选中，则其他id大于当前的复选框也应该被取消选中，即 id=2、id=3、id=4、id=5 也应该取消选中，依此类推。

我的代码:

<input type="checkbox" id="1" class="cb">
<input type="checkbox" id="2" class="cb">
<input type="checkbox" id="3" class="cb">
<input type="checkbox" id="4" class="cb">
<input type="checkbox" id="5" class="cb">

$('input.CB').on('change', function() {
    $('input.CB').not(this).prop('checked', false);  
});

Answer 1

如果我正确理解你的问题，你正在寻找这样的东西:

lowest_unchecked = false;
$('.cb').on('change', function(){
    $('.cb').each(function(){

        if( !$(this).prop( 'checked' ) ){
            lowest_unchecked = $(this).attr('id');
        }
        if( lowest_unchecked !== false && lowest_unchecked < $(this).attr('id') ){
            $(this).prop('checked', false);
        }
    });
});

通过不检查 id 是否小于发生更改的 id，可以提高效率，但这可能会很好地满足您的需求。

编辑:根据要求添加 fiddle :https://jsfiddle.net/93o1kkjn/1/