Aktivieren/Deaktivieren von MVC-Steuerelementen mit jQuery

Question

Ich habe eine Tabelle mit mehreren bearbeitbaren Feldern, die einem MVC-Modellobjekt entsprechen. Derzeit habe ich in jeder Zeile eine Zelle mit zwei Schaltflächen, die beim Klicken zwischen einer Bearbeitungs-/Speicherfunktion wechseln. Ich habe jetzt die Knöpfe, wo es zwischen den zwei Knöpfen umschaltet, so dass immer nur eins sichtbar ist.

Das Problem:

Derzeit bin ich ein behindertes Eigenschaft in Razor Einstellung, die erfolgreich abgeblendet die Kontrollen, wenn sie nicht in ‚Bearbeiten‘ Modus befinden.

<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, jetzt in jQuery, ich habe zwei Handler bekam, die einfach folgendes tun sollte, wenn darauf geklickt:

1. ausblenden die Schaltfläche derzeit nicht verwendet
2. Anzeige der andere Funktionstaste
3. Aktivieren/Deaktivieren der bearbeitbaren Felder. Hier

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

Eine dieser Funktionen besteht für beide Tasten, und sie sind erfolgreich bei der Ein-/Ausblenden die Tasten aber die Eigenschaften ermöglichen es nicht/auf Klick zu deaktivieren, wie ich bin erwartet sie dazu.

Ich habe versucht, mit $().attr() und $().removeAttr() dafür auch. Außerdem habe ich die deaktivierte Eigenschaft in 'disabled' anstelle des aktuellen booleschen Werts ohne Glück geändert. Gibt es einen Grund, warum das in MVC nicht funktioniert? Gibt es im Hintergrund etwas mit meinen Funktionen, das die Änderung der HTML-Eigenschaften verhindern würde?

EDIT: Sollte auch beachten:

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

gibt die folgende 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

Fest.

Das Problem war mit dem Selektor.

Darüber hinaus erhielten alle deaktivierten Steuerelemente dieselbe Klasse, sodass sie alle gleichzeitig aktiviert/deaktiviert werden konnten.

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

}); 

Answer 2

mit Jquery:

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

JQuery:

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