How to disable other input when this input OnKeyUp?

Question

How to disable other input when this input OnKeyUp ?

When i input data into input name="inputid1" , i want to disabled other input

when i input data into input name="inputid2" , i want to disabled other input

when i input data into input name="inputid3" , i want to disabled other input

when i input data into input name="inputid4" , i want to disabled other input

How can i do this with javascript loop ?

<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

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/

Edited: I put the doPost function to execute the Ajax request.

Answer 2

There are to much messy things in your code, but I've made some corrections for you:

1. You have same names for four input elements, so you will always get inputid1 param in your PHP and I think this is not want you want to achieve.
2. You don't need to bind 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.
3. No need to create functions for each input, you already have enough information which separates the meaning of them.
4. Also after once 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. 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:

<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:

/**
 * 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/