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

Question

我有三个文本框和一个复选框视图：

@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')); 
    }); 
});