Question

我有三个文本框和一个CheckBox的视图：

    @foreach( var item in Model )
{
    <tr>
        <td>
            @Html.CheckBox("name")
        </td>
        <td>
            @Html.EditorFor(m => item.Toolbox)
        </td>
        <td>
            @Html.EditorFor(m => item.Name)
        </td>
        <td>
            @Html.EditorFor(m => item.Link)
        </td>
    </tr>
}

我如何创建JS代码将此复选框绑定到不同的文本框？此“名称”复选框应禁用/启用每个时间循环创建它的三个文本框。 Model中有500多个项目。

Answer 1

您可以设置计数器并为每个块创建唯一的类或某个属性。例如：

<table id="myTable">
     @{
            int c = 0;
            for(int i = 0; i < Model.Count; i++)
            {
                c++;
                <tr class="@("block"+c)">
                    <td>
                        @Html.CheckBox("name", new {data_block=c})
                    </td>
                    <td>
                        @Html.EditorFor(m => item.Toolbox)
                    </td>
                    <td>
                        @Html.EditorFor(m => item.Name)
                    </td>
                    <td>
                        @Html.EditorFor(m => item.Link)
                    </td>
                </tr>
            }
</table>

然后javascript代码：

$(function(){
        $('#myTable checkboxes').click(function(){
            var checkbox = $(this),
            blockNum = checkbox.data('block'),
            inputs = $('tr.block'+blockNum),
            state = checkbox.is(':checked');

            $.each( inputs, function( i, el ){
                $(el).prop("disabled", state);
            });
        });
    });

Answer 2

另一种方式

<table id="myTable">
                @foreach( var item in Model )
                {
                    <tr>
                        <td>
                            @Html.CheckBox("name", new { @class = "nameCheckbox" })
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Toolbox, new { @class = "someCleverClassName" })
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Name, new { @class="someCleverClassName" })
                        </td>
                        <td>
                            @Html.TextBoxFor(m => item.Link, new { @class="someCleverClassName" })
                        </td>
                    </tr>
                }
            </table>

和javascript

$(function(){
    $('#myTable .nameCheckbox').click(function(){
        $(this).closest('tr').find('.someCleverClassName').prop("disabled", $(this).prop('checked'));
    });
});

ASP.NET MVC Checboxes禁用/启用文本框

2 个答案: