javascript - Disable all controls of a table column using jQuery - Stack Overflow

admin管理员组

文章数量:1332687

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!

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!

• javascript
• jquery
• html
• tablerow
• rowid

Share Improve this question Follow edited Jan 8, 2013 at 9:41 davioooh 24.7k4747 gold badges170170 silver badges259259 bronze badges asked Feb 26, 2012 at 8:39 AnupamAnupam 1,84133 gold badges2424 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

try this

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

:input select all the input elements

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...

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().

本文标签： javascriptDisable all controls of a table column using jQueryStack Overflow