Q: jquery - iterate through each element and perform a conditional statement on a specific child element that alters a different child element I'm trying to disable a textarea based on whether or not a checkbox is checked. I have multiple forms that contain 3 fields: checkbox, text, and textarea. I need for the textarea field to become disabled when the checkbox isn't checked.
HTML - I have between 2 and 8 of these elements. The first 4 come loaded on page, and the user has the ability to remove up to 2, or add up to 4 more.
<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');
        }
});

I'm expecting for the textarea to grey out and become disabled when the checkbox is not checked.
https://jsfiddle.net/myricktc/mn8cj27s/2/

A: You need an event handler for the change event of the checkboxes and, you want to trigger the change event at the start.
//set up event handler for change event on all relevant checkboxes
$('form[name="keywords"] :checkbox').on('change', function() {
    $(this).closest('li').find('textarea,input.category').prop('disabled', !this.checked);
})
//trigger change event so initial state of textarea can be set
.change();

You do not need to iterate through the elements.


//set up event handler for change event on all relevant checkboxes
$('form[name="keywords"] :checkbox').on('change', function() {
    $(this).closest('li').find('textarea,input.category').prop('disabled', !this.checked);
})
//trigger change event so initial state of textarea can be set
.change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
        <li class="">
            <div class="row valign-wrapper">
                <div class="col s1">
                    <input class="checkbox" name="activate-list" type="checkbox" checked>
                </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>



A: I got this to what I needed with this:
 $(document).ready(function() {
    $('input[name="activate-list"]').each(function() {
        if($(this).is(':checked')) {
                $(this).closest('form').find('textarea, input[name="title"]').prop('disabled', false)
            }
            else {
                $(this).closest('form').find('textarea, input[name="title"]').prop('disabled', true)
            }
        $(this).change(function() {
            if($(this).is(':checked')) {
                $(this).closest('form').find('textarea, input[name="title"]').prop('disabled', false)
            }
            else {
                $(this).closest('form').find('textarea, input[name="title"]').prop('disabled', true)
            }
        });
    });
});

I think there's a more efficient way to do this but it's working for now
