单击 jquery-tabledit 中的编辑按钮时如何启用选择框？

如何解决单击 jquery-tabledit 中的编辑按钮时如何启用选择框？

我有一个带有选择框的表格，我想默认禁用它（出于安全目的）。现在，当单击 jquery-tabledit 中的编辑按钮时，我希望再次启用它。我怎么能做到这一点？单击“保存”时，action_user_2.PHP 将使用 [action] => edit 调用，但我需要在单击同一页面上的编辑按钮时进行监听，以便我可以将选择框更改为“select name='selectBox'”（删除禁用）。

<!--User Approval-->
    <td>
        <form method='POST'>
            if ($row_approved['admin_approved'] == 'Approved') {
            echo "<select disabled name='selectBox' onchange='this.form.submit()'>
                <option value='Approved' selected>Approved</option>
                <option value='disapproved'>disapproved</option>
            </select>";
            } else if ($row_approved['admin_approved'] == 'disapproved') {
            echo "<select name='selectBox' onchange='this.form.submit()'>
                <option value='Approved'>Approved</option>
                <option value='disapproved' selected>disapproved</option>
            </select>";
            }
            echo "
        </form>
    </td>

    <!--User Roles-->
    <td>
    <form method='POST'>
    <select disabled class='roles_checkBox' multiple='multiple' name="roles_checkBox[]"
            onchange='this.form.submit()'>
    </select>
<?PHP
echo "
    </form>
    </td>

<script>
    $(document).ready(function () {
        $('#editable_table').tabledit({

            // when click on save; action_user_2.PHP gets called
            url: 'action_user_2.PHP',// where data will be sent
            
            data: {approved_status: approved_status},columns: {
                identifier: [0,"user_id"],editable: [[1,'first_name'],[2,'last_name'],[3,'email']]
            },// hide the column that has the identifier
            hideIdentifier: true,// activate focus on first input of a row when click in save button
            autoFocus: true,// activate save button when click on edit button
            saveButton: true,restoreButton: false,onSuccess: function (data,textStatus,jqXHR) {
                var htmlString = "<?PHP echo 'User information has been updated'; ?>";
                alert(htmlString);

                // custom action buttons
                if (data.action === 'delete') {
                    $('#' + data.id).remove();
                }
            }
        });

    });
    $('#editable_table').DataTable();
</script>

action_user_2.PHP

$input = filter_input_array(INPUT_POST);
print_r($input);

控制台->网络->action_user_2.PHP

Array ( [user_id] => 4 [first_name] => New [last_name] => User [email] => tes@gmail.com [action] => edit )

解决方法

如果我理解正确，您想单击编辑按钮来编辑当前行字段，并选择带有 name="roles_checkbox[]" 的选择变为 name="selectbox" 并删除 disabled 属性？

如果是，那么您可以尝试我添加的“onclick”事件

......
.......

$(document).ready(function () {

    $(document).on("click",".tableit-edit-button",function() {
        $(".roles_checkbox").attr("name","selectbox").removeAttr('disabled');
    });

    $('#editable_table').Tabledit({
    .........
    .........

您可以在此处使用 $(this).closest("tr").find("[name=selectbox]") closest() 将在点击按钮的位置获得 tr 然后 find() 方法将在该 tr 中找到您的选择框，然后只需删除禁用从那个选择框

演示代码：

$('#editable_table').Tabledit({
  //some codes...
  columns: {
    identifier: [0,"user_id"],editable: [
      [1,'first_name'],[2,'last_name'],[3,'email'],]
  },// hide the column that has the identifier
  hideIdentifier: true,// activate focus on first input of a row when click in save button
  autoFocus: true,// activate save button when click on edit button
  saveButton: true,restoreButton: false,onSuccess: function(data,textStatus,jqXHR) {
    var htmlString = "<?php echo 'User information has been updated'; ?>";
    alert(htmlString);

    // custom action buttons
    if (data.action === 'delete') {
      $('#' + data.id).remove();
    }
  }


});

$(document).on("click",".tabledit-edit-button",function() {
  //get closest tr and then find slectbox and disable same
  $(this).closest("tr").find("[name=selectbox]").removeAttr('disabled')

  $(this).closest("tr").find("[name*=roles_checkbox]").removeAttr('disabled')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-tabledit@1.0.0/jquery.tabledit.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered" id="editable_table">
  <thead class="thead-dark">
    <tr>
      <th>user_id</th>
      <th>first_name</th>
      <th>last_name</th>
      <th>email</th>
      <th>Approved</th>
      <th>Soemthing</th>
      <th class="tabledit-toolbar-column"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Soemthing..
      </td>
      <td>
        Soemthing..1
      </td>
      <td>
        Soemthinga@gmail.com
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectbox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='Disapproved'>Disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]" onchange='this.form.submit()'>
            <option value='1' selected>1</option>
            <option value='2'>2</option>
          </select>

        </form>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Soemthing..
      </td>
      <td>
        Soemthing..2
      </td>
      <td>
        Soemthinga@gmail.com
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectbox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='Disapproved'>Disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]" onchange='this.form.submit()'>
            <option value='1' selected>1</option>
            <option value='2'>2</option>
          </select>

        </form>
      </td>
    </tr>
  </tbody>
</table>