Question

我有一张这样的表：

当我点击编辑按钮时，我将能够编辑状态字段和操作字段。它可以正常工作。但问题是，在单击编辑按钮之前，我将能够更改状态和操作的值。我想禁用它。

如果我使用<input type="checkbox" disabled="disabled">，当我去编辑按钮时，我将无法更改该值。

我的html页面：

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

单击编辑按钮时执行的javascript代码为：

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.

在单击编辑之前禁用复选框

2 个答案: