使用jQuery启用/禁用MVC控件

Question

I've got a table with multiple editable fields that correspond to an MVC model object. Currently, I've got a cell in each row with two buttons that will toggle between an edit/save function when they are clicked. I've got the buttons working now to where it will switch between the two buttons so that only one is visible at a time.

The Problem:

Currently, I'm setting a disabled property in Razor that successfully grays out the controls when they are not in 'edit' mode.

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

So now in jQuery, I've got two handlers which should simply do the following when clicked:

1. Hide the button not currently in use
2. Display the other function button
3. Enable/Disable the editable fields.

Here is the code:

 $(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();
});

One of these functions exists for both buttons and they are successful at showing/hiding the buttons but the properties are not enabling/disabling on click as I'm expecting them to.

I have tried using $().attr() and $().removeAttr() for this as well. Additionally, I have changed the disabled property to 'disabled' , instead of the current Boolean value with no luck. Is there some reason this would not work in MVC? Is there something going on in the background with my functions that would prevent the modification of the HTML properties?

EDIT: Should also note that:

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

returns the following 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

using jquery:

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

JQuery:

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

Answer 2

Fixed.

The issue WAS with the selector.

Additionally, all disabled controls were given the same class so they could be enabled/disabled all at once.

Razor:

    <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();

});