jQuery disable multiple input children of a div

Question

I want do do something like below from a checkbox,

There's a checkbox on every row, and I'd like to disable all the input fields on a row with the class .room when the checkbox is clicked.

function toggleStatus(link) {
    $(link).closest(".room").children(':input').attr('disabled', true);
}

also tried

function toggleStatus(link) {
    $(link).closest(".room").children('input[type=text]').attr('disabled', true);
}

Solution

Your question has some ambiguities, so the following may not be exactly what you're looking for.

Upon click, you should traverse up to the nearest table-row, find all inputs having the classname .room and set their disabled-attribute according to the status of the checkbox itself.

$(":checkbox").click(function(){
  $(this).closest("tr").find(":input.room")
    .attr("disabled", $(this).is(":checked"));
});

This assumes a structure similar to that which follows:

<table>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
      <td><input type="text" class="room" /></td>
    </tr>
  </tbody>
</table>

Online Demo: http://jsbin.com/umimu/edit

Comments

[Sampson]

@holden: Lucky guess I suppose :) Glad I could help.