javascript - のクラスチェンジそれぞれのチェックボックスの場合チェックされています

Question

各リストアイテムグループのチェックボックスを含むliに取り組んでいます。各リストのチェックボックスをクリックすると、リストのaddClassが必要になりますが、チェックボックスの1つだけをチェックした場合でも、すべてのリストのaddClassが追加されます。これが私のコードです。すべての addclass をすべての li に適用するのではなく、addclass をそれ自体にのみ適用したい

<ul class="sortable-list taskList list-unstyled ui-sortable">
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.1
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.2
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.3
        </li>
    </ul>

これは私のjqueryです

<script>
    $('input.cbx').on('change', function () {
        if ($(this).is(":checked")) {
            $('.ui-sortable li').addClass("task-warning");
        } else {
            $('.ui-sortable li').removeClass("task-warning");
        }
    });
</script>