单击 jquery-tabledit 中的编辑按钮时如何启用选择框？
Posted
技术标签:
【中文标题】单击 jquery-tabledit 中的编辑按钮时如何启用选择框？【英文标题】：How to enable Select Box when edit button from jquery-tabledit is clicked? 【发布时间】：2021-04-24 06:53:38 【问题描述】：我有一个带有选择框的表格，我希望默认禁用它（出于安全目的）。现在，当单击 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 )
【问题讨论】：
比提供赏金更能帮助您获得答案的是创建一个最小的示例 - 一个包含一些硬编码数据的表，所有这些都设置为与您正在组合的两个插件一起使用。为了测试代码，需要重新创建的东西太多了。 【参考方案1】：如果我理解正确，您想点击编辑按钮来编辑当前行字段，然后用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(
.........
.........
【讨论】：
【参考方案2】：您可以在此处使用$(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>【讨论】：
您将如何实现您对 的回答？我试过了：$(this).closest("tr").find("[name=roles_checkbox[]]").removeAttr('disabled') 还是不行
嗨，像这样：$(this).closest("tr").find("[name*=roles_checkbox]").removeAttr('disabled') 也更新了答案。
我为一个新的相关问题创建了一个新问题。有兴趣请看Here。以上是关于单击 jquery-tabledit 中的编辑按钮时如何启用选择框？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery-Tabledit 抛出 MethodNotAllowedHttpException
从 List Adapter Android 中的按钮单击编辑 EditText