Question

我遇到了问题，我有以下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". 
        });
    });

}

Answer 1

您正在使用$（'＃settbl tr'）进行搜索。过滤（'：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>

使用jquery在表格中启用文本框

1 个答案: