deaktivieren Checkbox vor bearbeiten klicken

Question

Ich habe eine Tabelle wie folgt aus:

, wenn ich auf die Schaltfläche Bearbeiten klicken, wird ich in der Lage sein, den Status-Feld und Aktion zu bearbeiten field.It richtig funktioniert. Aber das Problem ist, dass ich in der Lage sein werde, den Wert von Status und Aktion zu ändern, bevor ich auf die Bearbeitungsschaltfläche klicke. Ich möchte das deaktivieren.

Wenn ich <input type="checkbox" disabled="disabled"> verwende, kann ich den Wert nicht ändern, wenn ich zur Bearbeitungsschaltfläche gehe.

Meine HTML-Seite:

<table class="table table-striped table-hover table-bordered" id="editable-sample"> 
     <thead> 
     <tr> 
     <th>Username</th> 
     <th>emailId</th> 
     <th>status</th> 
     <th>action</th> 
     <th>Edit</th> 

     </tr> 
     </thead> 
     <tbody> 
     {% for item in items %} 
     <tr class=""> 
     <td>{{ item.username }}</td> 
     <td>{{ item.email }}</td> 
     <td><input type="checkbox" name="status" ></td> 
     <td><input type="checkbox" name="action"></td> 
     <td><a class="edit" href="javascript:;">Edit</a></td> 
     </tr> 
     {% endfor %} 
    </table> 

Mein ausgeführt Javascript-Code, wenn Editier Button ist:

var EditableTable = function() { 

    return { 

     //main function to initiate the module 
     init: function() { 
      function restoreRow(oTable, nRow) { 
       var aData = oTable.fnGetData(nRow); 
       var jqTds = $('>td', nRow); 

       for (var i = 0, iLen = jqTds.length; i < iLen; i++) { 
        oTable.fnUpdate(aData[i], nRow, i, false); 
       } 

       oTable.fnDraw(); 
      } 

      function editRow(oTable, nRow) { 
       var aData = oTable.fnGetData(nRow); 
       var jqTds = $('>td', nRow); 
       jqTds[2].innerHTML = '<input type="checkbox" class="form-control small" value="' + aData[2] + '">'; 
       jqTds[3].innerHTML = '<input type="checkbox" class="form-control small" value="' + aData[3] + '">'; 
       jqTds[4].innerHTML = '<a class="edit" href="">Save</a>'; 

      } 

      function saveRow(oTable, nRow) { 
       var jqInputs = $('input', nRow); 
       oTable.fnUpdate(jqInputs[2].value, nRow, 2, false); 
       oTable.fnUpdate(jqInputs[3].value, nRow, 3, false); 
       oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false); 
       oTable.fnDraw(); 
      } 

      function cancelEditRow(oTable, nRow) { 
       var jqInputs = $('input', nRow); 
       oTable.fnUpdate(jqInputs[2].value, nRow, 2, false); 
       oTable.fnUpdate(jqInputs[3].value, nRow, 3, false); 
       oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false); 
       oTable.fnDraw(); 
      } 

      var oTable = $('#editable-sample').dataTable({ 
       "aLengthMenu": [ 
        [5, 15, 20, -1], 
        [5, 15, 20, "All"] // change per page values here 
       ], 
       // set the initial value 
       "iDisplayLength": 5, 
       "sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>", 
       "sPaginationType": "bootstrap", 
       "oLanguage": { 
        "sLengthMenu": "_MENU_ records per page", 
        "oPaginate": { 
         "sPrevious": "Prev", 
         "sNext": "Next" 
        } 
       }, 
       "aoColumnDefs": [{ 
         'bSortable': false, 
         'aTargets': [0] 
        } 
       ] 
      }); 

      jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input 
      jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown 

      var nEditing = null; 

      $('#editable-sample_new').click(function (e) { 
       e.preventDefault(); 
       var aiNew = oTable.fnAddData(['', '', '', '', 
         '<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>' 
       ]); 
       var nRow = oTable.fnGetNodes(aiNew[0]); 
       editRow(oTable, nRow); 
       nEditing = nRow; 
      }); 

      $('#editable-sample a.edit').live('click', function (e) { 
       e.preventDefault(); 

       /* Get the row as a parent of the link that was clicked on */ 
       var nRow = $(this).parents('tr')[0]; 

       if (nEditing !== null && nEditing != nRow) { 
        /* Currently editing - but not this row - restore the old before continuing to edit mode */ 
        restoreRow(oTable, nEditing); 
        editRow(oTable, nRow); 
        nEditing = nRow; 
       } else if (nEditing == nRow && this.innerHTML == "Save") { 
        /* Editing this row and want to save it */ 
        saveRow(oTable, nEditing); 
        nEditing = null; 
        alert("Updated! Do not forget to do some ajax to sync with backend :)"); 
       } else { 
        /* No edit in progress - let's start one */ 
        editRow(oTable, nRow); 
        nEditing = nRow; 
       } 
      }); 
     } 

    }; 

}(); 

Answer 1

You can set checkbox button data-id like : 

<input type="checkbox" name="cb" data-id="c-1" /> 

<button type="button" data-id="1" onclick="click(this)">Edit</button> 


function click(e){ 
    var id = $(e).data('id'); 
    $('input[data-id="c-'id'"]').prop("enabled", true); 
} 

Answer 2

$('.ColVis_collection button').first().find('input[type="checkbox"]').prop("disabled", true); 

Check Here.