3

我遇到了一个问题，我有以下 html 结构。最初，所有文本框都被禁用。
当我勾选第一列中的某个复选框时，我想启用此行中的文本框。问题是我可以启用除“Tag 02”之外的所有文本框。我相信row2中有一个“rowspan = 2”，所以我的代码在tag02行中找不到td。我在下面发布了我的代码，有人可以帮我解决这个问题吗？非常感谢。

<html>
<body>
<table border="1"  id="settbl" cellspacing="0" cellpadding="0" width="500">
<thead>
<tr>
<th></th>
<th colspan="2">Setting</th>
<th>Value</th>
<th>Units</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row1</td>
<td><input type="text"/></td>
<td>Units</td>
<td rowspan="10"><button>Edit</button></td>
</tr>
<tr>
<td rowspan="2"><input type="checkbox"/></td>
<td rowspan="2">Row2</td>
<td>Tag 01</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td>Tag 02</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row3</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
</tbody>
</table>
</body>
</html>

我的代码在这里：

function enableRows(){
     $('#settbl tr').filter(':has(:checkbox:checked)').each(function() {    
        $(this).find('input[type=text],select').each(function() {
            this.disabled = false;//only enable "Row1","Row2->Tag01" and "Row3". 
        });
    });

}
4

1 回答 1

1

您正在使用 $('#settbl tr').filter(':has(:checkbox:checked)') 进行搜索，这意味着，它将返回<tr> 选中的复选框。但是在您的代码中，您可以看到 Tag02 的父级<tr>甚至没有复选框。你应该把<input>你想要检查的两个都放在<tr>与复选框相同的地方。

        <tr>
            <td rowspan="2"><input type="checkbox"/></td>
            <td rowspan="2">Row2</td>
            <td>Tag 01</td>
            <td><input type="text"/></td>
            <td>Units</td>
        </tr>
        <tr>
            <td>Tag 02</td>
            <td><input type="text"/></td>
            <td>Units</td>
        </tr>

你可以试试这个代码。

<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        function enableRows() {
            $('#settbl tr').filter(':has(:checkbox:checked)').each(function() {
                $(this).find('input[type=text],select').each(function() {
                    this.disabled = false;
                });
            });
        }

    </script>
</head>
<body>
    <table border="1"  id="settbl" cellspacing="0" cellpadding="0" width="500">
        <thead>
            <tr>
                <th></th>
                <th colspan="2">Setting</th>
                <th>Value</th>
                <th>Units</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"/></td>
                <td colspan="2">Row1</td>
                <td><input type="text" disabled /></td>
                <td>Units</td>
                <td rowspan="10"><button>Edit</button></td>
            </tr>
            <tr>
                <td ><input type="checkbox"/></td>
                <td >
                    <table>
                        <tr>
                            <td>
                                Row2
                            </td>
                        <tr>
                        </tr>
                            <td>
                                Row2
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                               Tag 01
                            </td>
                        <tr>
                        </tr>
                            <td>
                                Tag 02
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                               <input type="text" disabled /></td>
                            </td>
                        <tr>
                        </tr>
                            <td>
                                <input type="text" disabled /></td>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table >
                        <tr>
                            <td>
                               <td>Units</td>
                            </td>

                        <tr>
                        </tr>
                            <td>
                                <td>Units</td>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td colspan="2">Row3</td>
                <td><input type="text" disabled /></td>
                <td>Units</td>
            </tr>
        </tbody>
    </table>
    <button onclick="enableRows();">Enable Rows</button>
</body>
</html>
于 2013-08-08T13:07:36.543 回答