jquery - перебирать каждый элемент и выполнять условный оператор для определенного дочернего элемента, который изменяет другой дочерний элемент

Question

Я пытаюсь отключить textarea в зависимости от того, установлен флажок или нет. У меня есть несколько forms, которые содержат 3 поля: checkbox, text и textarea. Мне нужно, чтобы поле textarea было отключено, когда checkbox не отмечен.

HTML - у меня есть от 2 до 8 из этих элементов. Первые 4 загружаются на страницу, и у пользователя есть возможность удалить до 2 или добавить еще 4.

<form name="keywords" class="keywords card-content">
    <ul id="">
        <li class="">
            <div class="row valign-wrapper">
                <div class="col s1">
                    <input class="checkbox" name="activate-list" type="checkbox">
                </div>
                <div class="col s11">
                    <input class="category" type="text" name="title" placeholder="Category Name">
                </div>
            </div>
            <div class="keyword-box">
                <textarea id="textbox1" name="keywords"></textarea>
            </div>
        </li>
    </ul>
</form>

jQuery

$('form[name="keywords"]').each(function() {
        if ($('input.checkbox').is(':checked')) {
            console.log('checked');
            ($('textarea').prop('disabled', false));
        }
        else {
            ($('textarea').prop('disabled', true));
            console.log('not checked');
        }
});

Я ожидаючтобы textarea стало серым и стало недоступным, если флажок не установлен.

https://jsfiddle.net/myricktc/mn8cj27s/2/