Select and disable each input field within a form, wrapped in a table in jquery

Question

I am disabling a form based on a checkbox...

I am having trouble adding the disabled attribute.

here is what I got so far: HTML:

<table id="shipInfoTable">
  <tr>
   <td>Name:</td>
   <td><input type="text" name="name" /></td>
  </tr>
  ...
</table>

Javascript selector/attribute manipulation(jquery):

$("#shipInfoTable tbody tr td input").each(function(index, item){
    item.attr("disabled", true);
});

Chrome Dev Console error: Uncaught TypeError: Object #<an HTMLInputElement> has no method 'attr'

When I alert out the item within the .each() it alerts [object HTMLInputElement]

Not quite sure how to select the input element properly. What am I doing wrong?

Ergosterol

Answer 1

The function will not give you a jQuery object. It should be:

$("#shipInfoTable input").each(function(index, item){
    $(item).attr("disabled", true);
});

(note that I also simplified your selector, it still works)
If you aren't doing anything eles with each item, this will work as well:

$("#shipInfoTable input").attr("disabled", true);

Onomastics

Please note: in current versions of jQuery, this was changed to .prop("disabled", true). I'm pretty sure attr didn't do was was intended anyway. – Onomastics

Answer 2

....

$("#shipInfoTable tbody tr td input").each(function(){
    $(this).attr("disabled", true);
});

Amias

Answer 3

the issue is the lack of $() in the .each() function...

$("#shipInfoTable tbody tr td input").each(function(index, item){
    $(item).attr("disabled", true);
});

Ergosterol