使用jQuery启用/禁用MVC控件

Question

我有一个表格，带有多个可编辑字段，与MVC模型对象相对应。当前，每行都有一个单元格，其中两个按钮在单击时将在编辑/保存函数之间切换。我现在有按钮可以在两个按钮之间切换到的位置，因此一次只能看到一个按钮。

问题：

当前，我正在剃须刀中设置一个禁用的属性，该属性在不在"编辑"模式下时成功地弄出控件。

<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中，我有两个处理程序，当单击时应该简单地进行以下操作：

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

这是代码：

 $(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'，而不是没有运气的当前布尔值。是否有某种原因在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();
});