单击 jquery-tabledit 中的编辑按钮时如何启用下拉选择框? [英] How to enable DropDown Select Box when edit button from jquery-tabledit is clicked?
问题描述
我有一个带有下拉选择框的表格,我想默认禁用它(出于安全目的).现在,当单击 jquery-tabledit 中的编辑按钮时,我希望再次启用它.我怎么能做到这一点?每当多选 JS"评论它有效,但不是其他.我需要多选 JS"以便它显示为下拉选择框.
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.
这是Multiselect JS"执行时的样子评论:
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>
推荐答案
在您的代码中,您仅从 select-box 中删除 disable 但是,从 mutliselect 插件动态生成的元素仍然被禁用,因此您还需要从这些元素中删除 disable.
In your code you are removing disable from select-box only but , elements which are dynamically generated from mutliselect plugin are still disabled so you need to remove disable from that elements as well.
演示代码:
$('#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>
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">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>
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">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>
这篇关于单击 jquery-tabledit 中的编辑按钮时如何启用下拉选择框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!