[英]How to disable other input when this input OnKeyUp?
How to disable other input when this input OnKeyUp ? 当此输入OnKeyUp时如何禁用其他输入?
When i input data into input name="inputid1"
, i want to disabled other input 当我将数据输入到输入
name="inputid1"
,我想禁用其他输入
when i input data into input name="inputid2"
, i want to disabled other input 当我将数据输入到输入
name="inputid2"
,我想禁用其他输入
when i input data into input name="inputid3"
, i want to disabled other input 当我将数据输入到输入
name="inputid3"
,我想禁用其他输入
when i input data into input name="inputid4"
, i want to disabled other input 当我将数据输入到输入
name="inputid4"
,我想禁用其他输入
How can i do this with javascript loop ? 如何使用javascript循环执行此操作?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="text" id="inputid1" name="inputid1" onKeyUp="fn_test1()">
<br>
<input type="text" id="inputid2" name="inputid1" onKeyUp="fn_test2()">
<br>
<input type="text" id="inputid3" name="inputid1" onKeyUp="fn_test3()">
<br>
<input type="text" id="inputid4" name="inputid1" onKeyUp="fn_test4()">
<br>
<span id="myplace"></span>
</form>
<?PHP
for($i=1;$i<=4;$i++)
{
?>
<script>
function fn_test<?PHP echo $i; ?>() {
$("#inputid2").prop('disabled', true);
$("#inputid3").prop('disabled', true);
$("#inputid4").prop('disabled', true);
setTimeout(function(){
$.ajax
(
{
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
$("#inputid2").prop('disabled', false);
$("#inputid3").prop('disabled', false);
$("#inputid4").prop('disabled', false);
$('#myplace').show();
$('#myplace').html(data);
}
}
)
}, 2000);
}
</script>
<?PHP
}
?>
This will work 这会起作用
$('#form-id input').on('keyup',function() {
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
doPost();
});
function doPost() {
$.ajax({
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
$('#myplace').show();
$('#myplace').html(data);
},
always: function() {
$('#form-id input').removeAttr('disabled');
}
}
)
}
Working example: http://jsfiddle.net/z4apqjan/ 工作示例: http : //jsfiddle.net/z4apqjan/
Edited: I put the doPost function to execute the Ajax request. 编辑:我把doPost函数执行Ajax请求。
There are to much messy things in your code, but I've made some corrections for you: 您的代码中有很多混乱的事情,但是我为您做了一些更正:
inputid1
param in your PHP
and I think this is not want you want to achieve. PHP
获得inputid1
参数,我想这并不是您想要实现的。 keyup
for each element manually in html, better use advantage of jQuery
, for this purpose I've added class
attribute to all four inputs with value strangeInputs
, you can change it respectively as you wish. keyup
,更好地利用jQuery
优势,为此,我为所有四个输入添加了class
属性,其值strangeInputs
输入,您可以根据需要分别对其进行更改。 keyup
occurs to one of the input elements I think you no longer need keyup
handler, so we will remove it after first it's been fired with jQuery
's .off
function. keyup
输入后,我认为您不再需要keyup
处理程序,因此我们将首先使用jQuery
的.off
函数将其触发后将其删除。 Edit: but because you send request all the time keyup occurs to the input we should not disable event listener Finally your simplified code would look like this: 最后,简化的代码如下所示:
HTML: HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="text" id="inputid1" class='strangeInputs' name="inputid1">
<br>
<input type="text" id="inputid2" class='strangeInputs' name="inputid2">
<br>
<input type="text" id="inputid3" class='strangeInputs' name="inputid3">
<br>
<input type="text" id="inputid4" class='strangeInputs' name="inputid4">
<br>
<span id="myplace"></span>
</form>
JavaScript: JavaScript的:
/**
* scenario is simple, bind keyup event, when it fires once,
* execute desired code and remove keyup listener finally
*/
$(function(){
$('.strangeInputs').keyup(function(){
$('.strangeInputs').not(this).prop('disabled', true);
fn_test_inputs();
// $('.strangeInputs').off('keyup');
// in the case you send request at once keyup event occurs,
// you should not remove listener
});
});
function fn_test_inputs()
{
setTimeout(function(){
$.ajax
(
{
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
// here enable inputs again
$('.strangeInputs').prop('disabled', false);
$('#myplace').show();
$('#myplace').html(data);
}
}
)
}, 2000);
}
Simple input thing you can see here: http://jsfiddle.net/gttv53fg/ 您可以在这里看到简单的输入内容: http : //jsfiddle.net/gttv53fg/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.