Disable Input Field When Checkbox Toggled (JQuery)

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 - Input 1 Checkbox 2

Solution 1:

if you have this "very" simple structure

<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />​

you can

$(':checkbox').change(function(){
  $(this).next().attr('disabled',!this.checked);
})​;

here is a demo

but then I know you don't have that "very" simple structure so, read the following and get the idea from above...

1. traversing
2. selectors

If you can provide the structure of your html, much better...

Solution 2:

A few corrections to the markup first: that hidden input needs to be inside a <td> and the header row needs a closing </tr>, 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 <tr>, then finding inputs of [type=text] using .find() and :text.