Question

我有一个包含多个可编辑字段的表，这些字段对应于MVC模型对象。目前，我在每一行都有一个单元格，有两个按钮，当它们被点击时，它们将在编辑/保存功能之间切换。我现在有按钮工作，它将在两个按钮之间切换，这样一次只能看到一个按钮。

问题：

目前，我在Razor中设置了一个禁用属性，当它们处于“编辑”模式时，它们会成功地将控件灰化。

<table>
     <thead>
          ...stuff here
     </thead>
     <tbody>
@foreach(var item in Model)
{
  <tr>
     ...some columns
     <td class="selectDropDown">
          @Html.DropDownListFor(x => item.Prop1, (SelectList)ViewBag.Prop1Options, item.Prop1, new { @class = "form-control", @disabled=true })
     </td>
     <td class="editableTxt">
          @Html.TextBoxFor(x => item.Prop2, new { @class = "form-control", @disabled = "true"})
     </td>
     <td class="checkBox">
        @Html.CheckBoxFor(x => item.Prop3, new { @class = "checkbox", @disabled = "true" })
          ...Other Columns
      <td class="buttons">
         <btn class="btn btn-sm btn-primary editBtn"><i class="glyphicon glyphicon-edit"></i></btn>
         <btn class="btn btn-sm btn-success saveBtn" style="display:none"><i class="glyphicon glyphicon-floppy-disk"></i></btn>
       </td>
      </tr>
}
   </tbody>
</table>

所以现在在jQuery中，我有两个处理程序，在点击时应该只执行以下操作：

隐藏当前未使用的按钮
显示其他功能按钮
启用/禁用可编辑字段。

以下是代码：

 $(document).on('click', '.editBtn', function () {


    var editButton = $(this);
    var selectedRow = $(this).parent();

    selectDropDown = selectedRow.closest('tr').children('td.selectDropDown');
    editableText = selectedRow.closest('tr').children('td.editableTxt');
    checkBox = selectedRow.closest('tr').children('td.checkBox');


    selectDropDown.prop('disabled', false);
    editableText.prop('disabled', false);
    checkBox.prop('disabled', false);

    editButton.hide();
    selectedRow.find('.saveBtn').show();
});

这两个按钮都存在这些功能之一，它们成功显示/隐藏了按钮，但是按照我期望的那样，属性不会启用/禁用点击。

我也尝试过使用$().attr()和$().removeAttr()。另外，我已将disabled属性更改为'disabled'，而不是当前的布尔值而没有运气。有什么理由不适用于MVC吗？后台有什么东西在我的函数中会阻止修改HTML属性吗？

编辑：还应注意：

selectDropDown = selectedRow.closest('tr').children('td.selectDropDown');

返回以下html：

<select class="form-control" disabled="true" id="item_Prop" name="item.Prop"><option value="">Value</option>
    <option>Value</option>
    <option>Value</option>
    <option>Value</option>
    <option>Value</option>
    <option>Value</option>
    </select>

Answer 1

使用jquery：

   @Html.ActionLink("Delete", "Delete", new { id = @Model.Id}, new { class = "disabledme" })

JQuery的：

$function(){
    $(".disabledme").click(function(){
        return false;
    }
}

Answer 2

固定。

问题与选择器有关。

此外，所有禁用的控件都被赋予相同的类，因此可以一次启用/禁用它们。

剃刀：

    <td>
     @Html.DropDownListFor(x => item.Prop1, (SelectList)ViewBag.Prop1Options, item.Prop1, new { @class = "form-control enableControl", @disabled="disabled" })
   </td>

jQuery的：

  $(document).on('click', '.editBtn', function () {


    var editButton = $(this);
    var selectedRow = $(this).parent();


    disabledControls = selectedRow.closest('tr').find('.enableControl');


    disabledControls.prop('disabled', false);

    editButton.hide();
    selectedRow.find('.saveBtn').show();

});

使用jQuery启用/禁用MVC控件

2 个答案: