在使用jquery单击特定复选框时，在teleerik网格中启用一行的特定文本框

Question

我有一个有许多列的teleerik网格。在许多列中，在一些列中，我通过数据库查询显示数据。一行的其余列将有一个文本框，默认情况下将被禁用。每一行都有一个复选框。在复选框上单击，我想启用选中复选框的特定行的禁用文本框:

这是我的teleerik grid代码:

<% Html.Telerik().Grid< Model>()
            .Name("Grid1")
            .ToolBar(toolbar => toolbar.Template(
                                Html.Resource("Grid")))
                                 .DataKeys(keys =>
                                 {
                                     keys.Add(o => o.FName);
                                 })
                .Columns(columns =>
                {
                    columns.Bound(m => m.EmployeeID)
                       .ClientTemplate("<input type='checkbox' name='Employee1' id='Employee1' onclick='return Function1(this);'/>")
                    columns.Bound(m => m.EmpName).Title("EmpName").ReadOnly(true).Width(70);
                    columns.Bound(m => m.Task).Title("Task")
                        .ClientTemplate("<input type='textbox' name='Task' id='Task' disabled='disabled' new { style='width:55px'} value='<#=Task#>' />").Width(53);
                })
                .DataBinding(databinding => databinding
                                        .Ajax()
                                        .Select("GetData", "Home")
                )
            .Scrollable()
            .Selectable()
            .Render();
        %>

我想为此编写一个jquery。

有人能帮我吗?

Answer 1

您必须向我们展示您生成的html。但不管它是什么像这样的东西会起作用。假设你的网格被写成这样的表格:

<table>
    <tr>
        <td>
           <input type='checkbox' name='SelectedEmployee' id='SelectedEmployee'/>
        </td>
        <td>
           <input type='text' name='Allocation' id='Allocation' />
        </td>
    </tr>
</table>

您可以通过以下命令切换文本框

$('[name="SelectedEmployee"]').click(function () {
    var row = $(this).closest('tr');
    if ($(this).is(':checked')) {
        // enable textbox when checkbox is checked
        row.find('#Allocation').removeAttr('disabled');
    }
    else {
        // disable textbox when checkbox is unchecked
        row.find('#Allocation').attr('disabled','disabled');
    }                
});