Question

如何在输入OnKeyUp时禁用其他输入？

当我将数据输入到输入name="inputid1"时，我想禁用其他输入

当我将数据输入到输入name="inputid2"时，我想禁用其他输入

当我将数据输入到输入name="inputid3"时，我想禁用其他输入

当我将数据输入到输入name="inputid4"时，我想禁用其他输入

我如何使用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
        }
?>

Answer 1

这将有效

$('#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');
                    }         
                }
            )
    }

工作示例： http://jsfiddle.net/z4apqjan/

已编辑：我将doPost函数用于执行Ajax请求。

Answer 2

您的代码中存在许多混乱的内容，但我已经为您做了一些更正：

您有四个输入元素的相同名称，因此您将始终在inputid1中获得PHP参数，我认为这不是您想要实现的。
您不需要在html中手动绑定keyup每个元素，更好地利用jQuery，为此我已添加class属性所有四个输入值strangeInputs，您可以根据需要分别更改它。
无需为每个输入创建函数，您已经有足够的信息来区分它们的含义。
此外，在其中一个输入元素出现keyup之后，我认为您不再需要keyup处理程序，因此我们会在首先使用{{1}触发后将其删除{＆＃39;} jQuery功能。编辑，但由于您一直向输入发送密钥请求，我们不应该禁用事件监听器

最后，您的简化代码如下所示：

HTML：

.off

<强> 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" 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>

您可以在此处看到简单的输入内容：http://jsfiddle.net/gttv53fg/

如何在输入OnKeyUp时禁用其他输入？

2 个答案: