使用jquery单击特定复选框,在telerik网格中启用行的特定文本框

时间:2013-05-06 07:08:46

标签: jquery asp.net-mvc-3 checkbox telerik-grid

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

这是我的telerik网格代码:

<% 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。

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:2)

您必须向我们展示您生成的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');
    }                
});