将jQuery Readonly设置为定时解锁

Set jQuery Readonly to a timed unlock

本文关键字：定时 解锁 设置 jQuery Readonly      更新时间：2023-09-26

我有一个表单，它有两个输入字段，一个完整的复选框和保存按钮。

勾选复选框并单击保存按钮后，将锁定输入框，使其无法进行任何后续编辑。

这工作正常。

我想在jQuery的只读上加一个时间，比如倒计时10秒。当它到达10秒结束时，它允许用户再次编辑表单。

如有任何帮助，我们将不胜感激。

HTML代码-

<fieldset> <legend>General Information</legend> <table class="full-width"> <tr> <td><?php echo form::label('title', 'Summary of Problem') ?></td> <td colspan="3"> <?php echo form::input('title', $test->title, array('class' => 'full-width', 'id' => 'title', 'style' => 'margin-left:2px')) ?> </td> </tr> <tr> <td><?php echo form::label('works_no','Works No.') ?></td> <td><?php echo form::input('works_no', $test->works_no, array('id' => 'works_no')) ?></td> </tr> </table> </fieldset>

<fieldset>
<legend>Complete</legend>
<?php echo Form::checkbox('complete', NULL, FALSE, array('id' => 'complete')) ?>


<div class="columns">
<div class="colx2-left align-center">
    <?php echo Form::button('save-test', 'Save Changes', array('id' => 'save-test', 'type' => 'button', 'value' => 'save-test')) ?>
</div>

jQuery代码-

$(function()
// Disable form input elements
$('#frm-test :input').attr('readonly', true);
$(document).on('mousedown keydown click', 'select, .datepicker, :radio', function(event) {
    event.preventDefault();
});
// re-enable form elements with exclude class
$('#frm-test .exclude').removeAttr('readonly');

使用window.setTimeout() javascript方法将ticker设置为10秒，如：

window.setTimeout(function() { // fuction to execute after timeout
   $('#frm-test .exclude').removeAttr('readonly');
}, 10000); // timeout time in milliseconds
相关文章：