Question

I have these inputs and checkbox in a form

<input class="validate[minCheckbox[1]] checkbox" id="maxcheck_0" type="checkbox" name="children[]" value="Juliette" />
<input type="text" name="school[]" id="school_0" value="" /><br />
<input class="validate[minCheckbox[1]] checkbox" id="maxcheck_1" type="checkbox" name="children[]" value="Franck" />
<input type="text" name="school[]" id="school_1" value="" /><br />
<input class="validate[minCheckbox[1]] checkbox" id="maxcheck_2" type="checkbox" name="children[]" value="Lisa" />
<input type="text" name="school[]" id="school_2" value="" />

and this jquery to bind the checkbox click

    $('input[type=checkbox]').bind('click',function() {
    if($(this).is(':checked')){
        $('#school_0').attr('class', 'validate[required]');
        //$('#school_1').attr('class', 'validate[required]');
        //$('#school_2').attr('class', 'validate[required]');
    } else {
        $('#school_0').removeAttr('class');
        //$('#school_1').removeAttr('class');
        //$('#school_2').removeAttr('class');
    }
}); 

How can I add a class attribute to any input related to its checkbox ?

Answer 1

If all your checkboxes are have ids formated like this “maxcheck_” + some integer and all the associated textboxes are associated according to the integer listed in the checkboxes id. Then you can:

Get the id of the clicked checkbox. split() that string at the _ and access the value in the 2nd position of the array. Using the value from the second position of the array you can then add it to the end of “school_” to modify the correct textbox.

$('input[type=checkbox]').bind('click',function() {
    if($(this).is(':checked')){
        var idnum = (($(this).attr("id")).split("_"))[1];
        $('#school_ ' + idnum).addClass('validate[required]');
    } else {
        $('#school_' + idnum).removeClass('validate[required]');
    }
});