How to enable DropDown Select Box when edit button from jquery-tabledit is clicked?

问题

I have a table with a dropdown select box that I want to be disabled by default (for safety purposes). Now, when the edit button from jquery-tabledit is clicked, I want it to be enabled again. How could I achieve so? Whenever "Multiselect JS" is commented it works, but not otherwise. I need "Multiselect JS" so that it shows as a dropdown select box.

This is how it looks when "Multiselect JS" is commented:

You can find demo code in the accepted answer Here

This question is different because it includes:

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

来源：https://stackoverflow.com/questions/66013359/how-to-enable-dropdown-select-box-when-edit-button-from-jquery-tabledit-is-click

标签

javascript

php

html

tabledit