Disable input field when checkbox toggled (JQuery)

Question

I have a list of checkboxes and with every checkbox, there is an input field. If I check the checkbox, the inputfield has to be disabled. Example:

Checkbox 1 -          


        

Answer 1

A few corrections to the markup first: that hidden input needs to be inside a and the header row needs a closing , then you can do this:

​$('#food').delegate(':checkbox', 'change', function(​​​​​​​​​​​​​​​​​) {
    $(this).closest('tr').find('input:text').attr('disabled', !this.checked);
});
$(':checkbox').change(); //set state initially

You can see a demo here, we're using .closest() to get up to the , then finding inputs of [type=text] using .find() and :text.