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

The real code:

<table id="food" width="580px">
    <tr>
        <th colspan="5">Eten</th>
        <tr>
            <td><input type="checkbox" name="checkbox_1_1" value="" /></td>
            <input type="hidden" name="todo_1_1" value="7" />
            <td>Braadworst</td>
            <td>7</td>
            <td><input type="text" name="item_1_1" size="4" value="" /></td>
            <td></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox_1_2" value="" /></td>
            <input type="hidden" name="todo_1_2" value="5" />
            <td>Witte worst</td>
            <td>5</td>
            <td><input type="text" name="item_1_2" size="4" value="" /></td>
            <td></td>
        </tr>
    </tr>
</table>

Only the input field with the same number may be disabled ...

Through Google I found: http://techchorus.net/disable-and-enable-input-elements-div-block-using-jquery

The example works perfectly, but is there a way to do this without pre-defining the names? In my case, it is impossible to know the names, so they have to be determined when toggling the checkbox, no?

Any suggestions?

Can you post the markup? It's definitely possible, but we need to know where the elements are in relation to each other. — Nick Craver
– Nick Craver, Commented Jun 24, 2010 at 11:47
@Nick is correct - if the elements are related in some consistent way (say, the checkbox and the text field grouped within a common <div> or <li> or <span>), then your script can "find" the text field by working through the DOM from the checkbox. — Pointy
– Pointy, Commented Jun 24, 2010 at 11:52

Reigel Gallarde · Accepted Answer · 2010-06-24 12:10:25Z

6

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...

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

edited Jun 24, 2010 at 12:10

answered Jun 24, 2010 at 12:00

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Craver Over a year ago

$(this).is(':checked') is a long way to say this.checked :) You can shorten that down to: $(':checkbox').change(function(){ $(this).next().attr('disabled',!this.checked); });.

Nick Craver · Accepted Answer · 2010-06-24 13:03:41Z

4

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.

answered Jun 24, 2010 at 13:03

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

3 Comments

koenHuybrechts Over a year ago

Hi Nick, Thanks for the example and the code! I've tried the example and the text field is disabled when the checkbox isn't checked. Can it be changed to this: Input text field is disabled when checkbox is checked? Where do I put the javascript-code? Just as normal JQuery code in the head?

Reigel Gallarde Over a year ago

@koko- ahh, just change !this.checked to this.checked, remove !

koenHuybrechts Over a year ago

Thanks a lot for the help! It seems I have to learn a LOT of JQuery :-)

Collectives™ on Stack Overflow

Disable input field when checkbox toggled (JQuery)

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related