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

Posted 2023-05-08

【中文标题】单击 jquery-tabledit 中的编辑按钮时如何启用下拉选择框？

【英文标题】：How to enable DropDown Select Box when edit button from jquery-tabledit is clicked?

【发布时间】：2021-05-06 20:22:19

【问题描述】：

我有一个带有下拉选择框的表格，我希望默认禁用它（出于安全目的）。现在，当单击 jquery-tabledit 中的编辑按钮时，我希望再次启用它。我怎么能做到这一点？ 每当评论“Multiselect JS”时，它都会起作用，但不是。我需要“Multiselect JS”，以便它显示为下拉选择框。

这是评论“Multiselect JS”时的样子：

您可以在接受的答案Here中找到演示代码

这个问题不同，因为它包括：

<!--Multiselect JS-->
<script>
    $(document).ready(function () 
        $('.roles_checkbox').multiselect(
            includeSelectAllOption: true,
            nonSelectedText: '--Select Role--'
        );
    );
</script>

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

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

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

<!--Multiselect JS-->
<script>
    $(document).ready(function () 
        $('.roles_checkbox').multiselect(
            includeSelectAllOption: true,
            nonSelectedText: '--Select Role--'
        );
    );
</script>

【问题讨论】：

这能回答你的问题吗？ How to enable Select Box when edit button from jquery-tabledit is clicked?

@Dr.Andrew 不，它没有。我发布了两个问题。

【参考方案1】：

在您的代码中，您仅从选择框中删除 disable 但是，从 mutliselect 插件动态生成的元素仍然被禁用，因此您需要从中删除 disable元素也是如此。

演示代码：

$('#editable_table').Tabledit(
  //some codes...
  columns: 
    identifier: [0, "user_id"],
    editable: [
      [1, 'first_name'],
      [2, 'last_name'],
      [3, 'email'],

    ]
  ,
  hideIdentifier: true,
  autoFocus: true,
  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] , .dropdown-toggle ").removeAttr('disabled') //remove attr from button as well
  $(this).closest("tr").find(".dropdown-toggle").removeClass('disabled') //remove disable class from button
)
$('.roles_checkbox').multiselect(
  includeSelectAllOption: true,
  nonSelectedText: '--Select Role--',
  buttonWidth: '150px'
);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/css/bootstrap-multiselect.css" integrity="sha512-DJ1SGx61zfspL2OycyUiXuLtxNqA3GxsXNinUX3AnvnwxbZ+YQxBARtX8G/zHvWRG9aFZz+C7HxcWMB0+heo3w==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js" integrity="sha512-ljeReA8Eplz6P7m1hwWa+XdPmhawNmo9I0/qyZANCCFvZ845anQE+35TuZl9+velym0TKanM2DXVLxSJLLpQWw==" crossorigin="anonymous"></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>
        [e-mail]
      </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">Option 1</option>
            <option value="2" selected="selected">Option 2</option>

            <option value="3" selected="selected">Option 3</option>
            <option value="4">Option 4</option>
          </select>

        </form>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Soemthing..
      </td>
      <td>
        Soemthing..2
      </td>
      <td>
        [e-mail]
      </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">Option 1</option>
            <option value="2" selected="selected">Option 2</option>
            <!-- Option 3 will be selected in advance ... -->
            <option value="3" selected="selected">Option 3</option>
            <option value="4">Option 4</option>
          </select>

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

【讨论】：

评论//buttonWidth: '150px'时在我的桌子上效果很好