Jquery problem selecting all elements of a table

Question

I'm using JQuery 1.3.2 and have the following code -

My html is -

<table class="disableClass" id="formOptionsPreview">
<%--Spacing Row, this row exists solely to make the table columns size correctly --%>
<tr id="formOptionsPreviewRow">
    <td style="width: 130px; border-style: none">
        &nbsp;
    </td>
    <td style="width: 90px; border-style: none">
....
    </td>
</tr>
</table>

My Jquery code is -

    <script type="text/javascript">
    $(".disableClass").contents().andSelf().attr('disabled', 'disabled');
</script>

What I'm trying to to is to disable all input items in the table. I have a viewonly mode for the screen and the easiest thing I can do is to disable (or make readonly) all the input fields.

In IE8, this code works exactly as expected. All elements are disabled. However, in FF3.5.2, only the table and the outer table row show as being disabled. In FF it looks like this is searching only one level deep in the DOM tree.

Any suggestions as to what I'm doing incorrectly.

Answer 1

You could try

 console.log($(".disableClass").contents().andSelf().length());

to determine if FF is finding all the dom elements. If it is, you know that FF doesn't handle the disabled CSS property the same way IE does.

Answer 2

This snippet will disable any input fields that are part of the formOptionsPreview table:

$('#formOptionsPreview :input').attr('disabled', true);

or alternatively all tables with the disableClass class:

$('table.disableClass :input').attr('disabled', true);