Disable all controls of a table column using jQuery

Question

I am looking to disable all the elements (controls) of specified table columns (td's) using jQuery.

My table looks like the following :

<table>
  <tr>
    <td id="1.1.tcol"></td>
    <td id="1.2.tcol"></td>
    <td id="1.3.tcol"></td>
    <td id="1.4.tcol"></td>
  </tr>
  <tr>
    <td id="2.1.tcol"></td>
    <td id="2.2.tcol"></td>
    <td id="2.3.tcol"></td>
    <td id="2.4.tcol"></td>
  </tr>
</table>

The table is generated dynamically, but this is how it is rendered as. Now each of my <td> has multiple controls like select, checkbox, buttons, but not fixed for every row and column. I am looking to disable all controls of a specified <td> by using it's Id.

I used the following jQuery, but it doesn't seemt to do the job :

$('#' + td_id).select('*').each(function(element){element.disabled=true});

I have also tried the following, still it doesn't seem to work :

$('#' + td_id).attr('disabled', 'false');

Am I doing something wrong? Please help.

Thanks!

Answer 1

try this

$('#' + td_id).find(':input').prop("disabled", true);

:input select all the input elements