1

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!

davioooh
  • 23,742
  • 39
  • 159
  • 250
Anupam
  • 1,821
  • 3
  • 23
  • 41

3 Answers3

3

try this

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

:input select all the input elements

dku.rajkumar
  • 18,414
  • 7
  • 41
  • 58
  • Doesn't seem to work. Also not all controls are of type 'input'. There are select dropdowns, textboxes, buttons, checkboxes. – Anupam Feb 26 '12 at 08:46
  • 1
    pls check the link in the answer.. it does select all inputs elements – dku.rajkumar Feb 26 '12 at 08:47
  • Oops...sorry. Didn't know that :input selects all the controls. Thought that it only selects types of input. But the code you provided doesn't disable. :( – Anupam Feb 26 '12 at 08:52
0

if you need to disable all controls in a column (multilpe rows) I think the best way is to assign a class to each td in that column.

For examle if you want to disable controls in the second column, you may do something similar:

<table>
  <tr>
    <td id="1.1.tcol"></td>
    <td id="1.2.tcol" class="col-2"></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" class="col-2"></td>
    <td id="2.3.tcol"></td>
    <td id="2.4.tcol"></td>
  </tr>
</table>

Than, using JQuery you can do this:

$(".col-2 :input').prop("disabled", true);

It should work...

davioooh
  • 23,742
  • 39
  • 159
  • 250
0

I think this should work :

<table>
<tr><td>
    <input type="text" />
    <input type="radio" />
    <input type="checkbox" />
    <select>
        <option>1233</option>
    </select>
    </td>
</tr>
<tr><td>
    <input type="text" />
    <input type="radio" />
    <input type="checkbox" />
    <select>
        <option>second</option>
    </select>
    </td>
</tr>

Now to disable only first "td" you should use:

$('tr').children().eq(0).find(':input').prop("disabled", true);

If you are using JQuery1.6 or above use prop() else use attr().

rp4361
  • 433
  • 1
  • 5
  • 20