how to use jquery to prevent the others type?

html structure:

 1,  <input id="edit-field-14sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text" type="text"></div>


2,  <input id="edit-f开发者_运维百科ield-15sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text" type="text"></div>


3 , <input id="edit-field-16sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text" type="text"></div>


4 ,<input id="edit-field-17sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text" type="text"></div>


5 ,<input id="edit-field-18sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text" type="text"></div>

now, i want to do, if the 1, 2, 3, input box has value, then can't type anything in 4, 5.

if the 4, 5, input box has value. then can't type anything in 1, 2, 3.

the following is my test code. but it can't work.

$(document).ready(function(){

$('#edit-field-14sq-und-0-value').keyup(function() {
    if ($('#edit-field-16sq-und-0-value').val().length > 0) {
        alert('you can\'t type them at the same time');
        $(this).val('');
        $("#edit-field-15sq-und-0-value").val('');
    }
})

});

the keyup function is give an error under firebug.

Edit: added "\" to escape single quote in alert();

change this line alert('you can't type them at the same time'); to

alert('you can\'t type them at the same time');

You can do like this. Demo: http://jsfiddle.net/ynhat/x64dH/1/

HTML:

1,  <input id="edit-field-14sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text form-text-1" type="text"><br />


2,  <input id="edit-field-15sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text form-text-1" type="text"><br />


3, <input id="edit-field-16sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text form-text-1" type="text"><br />


4, <input id="edit-field-17sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text form-text-2" type="text"><br />


5, <input id="edit-field-18sq-und-0-value" name="field_14sq[und][0][value]" value="" size="12" maxlength="10" class="form-text form-text-2" type="text">

Javascript:

$(document).ready(function() {

    $('.form-text-1').keyup(function() {
        $('.form-text-2').removeAttr('disabled');
        $('.form-text-1').each(function(index){
            if ($(this).val() != ''){
                $('.form-text-2').attr('disabled','disabled');
            }
        });
    })

    $('.form-text-2').keyup(function() {
        $('.form-text-1').removeAttr('disabled');
        $('.form-text-2').each(function(index){
            if ($(this).val() != ''){
                $('.form-text-1').attr('disabled','disabled');
            }
        });
    })
});

$("#form1, #form2, #form3, #form4").change(function(){
  if ($(this).attr('value')!=''){
    $("#form5, #form6, #form7, #form8,#form9, #form10, #form11").attr('readonly','readonly');
  } else {
    $("#form5, #form6, #form7, #form8,#form9, #form10, #form11").removeAttr('readonly');
  }
});

and so on with the other combinations

you could use

jQuery("#form1").keyup(function () {
   if(jQuery("#form1").val() != "" && jQuery("#form2").val() != ""){
       jQuery("#form3").attr("disabled","disabled");
   }
});

and repeat this for all forms.