Contact form 7 - how can i catch and customize each checkbox?

Question

how can i catch and customize each checkbox in Contact form 7 plugin?

i have a list of checkboxes in a single field.

what i'm trying to do is to add an attribute and value using jQuery to each checkbox.

like this:

$("input['type=checkbox']:nth-child(3)").attr("data-price", 500).addClass("cf7-checkbox");

this is my html code:

<span class="wpcf7-form-control-wrap list-tosafot1">
    <span class="wpcf7-form-control wpcf7-checkbox" id="options1st">
        <span class="wpcf7-list-item first">
            <input type="checkbox" name="list-tosafot1[]" value="price-100" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox1 - price 100</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="list-tosafot1[]" value="price-200" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox2 - price 200</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="list-tosafot1[]" value="price-300" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox3 - price 300</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="list-tosafot1[]" value="price-400" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox4 - price 400</span>
        </span>
        <span class="wpcf7-list-item last">
            <input type="checkbox" name="list-tosafot1[]" value="price-500" />&nbsp;
        <span class="wpcf7-list-item-label">Checkbox5 - price 500</span>
        </span>
    </span>
</span>

thanks so much!!!

Answer 1

This selector shouldn't work because the input elements don't share the same parent.

$("input['type=checkbox']:nth-child(3)").attr("data-price", 500).addClass("cf7-checkbox");

So I found this solution:

$('.wpcf7-checkbox .wpcf7-list-item:nth-child(3) input').attr("data-price", 500).addClass("cf7-checkbox");