javascript - 当这个输入OnKeyUp时如何禁用其他输入？

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 请求。