CODEWITHSUNDEEP
javascriptjquery
Ensom Hodder
Ensom Hodder

Reputation: 1548

jquery to get next input element

I have a number of checkboxes. Each of them is associated with one input field. When the checkbox is checked, I would like to set the input field is editable, i.e. disabled attribute as false. Otherwise, the input field is readonly. Code for one pair of such checkbox and input field is like below (all these code is included in one section called competencies : 

<label class="checkbox span3">
<input id="IT_OS_checkbox" type="checkbox" value="IT_OS" name="competency_checkbox[]">
IT - OS
</label>
<div class="controls">
<input id="IT_OS_input" class="input-xxlarge" type="text" name="competency_input[]" disabled="true" placeholder="mots clés séparés par virgule">
</div>

So I am trying to use Jquery's on method to fire the event for each checkbox. Code is as below : 

$("#competencies").on('change', '.checkbox', function (event) {
    var orig_val = event.target.parent().next('div').find('input').attr('disabled');
    alert(orig_val);
});

For simplicity, I just want to check the selector works fine, however, this code doesn't work. and in firebug, error message is TypeError: event.target.parent is not a function. Can anyone help me figure this out ?

Upvotes: 0

Views: 2267

Answers (1)

palaѕн
palaѕн

Reputation: 73966

Try this:

$("#competencies").on('change', '.checkbox', function (event) {
    var orig_val = $(event.target).parent().next('div').find('input').attr('disabled');
    alert(orig_val);
});

Just need to wrap the event.target to get the jQuery object.

Upvotes: 1

Related Questions