Приблизительно так:
<style>
#udost, #udost_stat{
display: none;
}
</style>
<input type="radio" name="doc_type" value="p" checked="checked"/> Паспорт
<input type="radio" name="doc_type" value="u"/> Уд. личности<br />
<input type="text" name="passport" id="passport" onkeyup="countDownchars(this.id, '7');" value="" maxlength=7> <span id="passport_stat">7</span>
<input type="text" name="udost" id="udost" onKeyUp="countDownchars(this.id, '9');" value="" maxlength=9> <span id="udost_stat">9</span>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$('input[type=radio]').click(function(){
if($(this).val()=='p') {
$('#udost, #udost_stat').css('display', 'none');
$('#passport, #passport_stat').css('display', 'inline');
}
if($(this).val()=='u') {
$('#passport, #passport_stat').css('display', 'none');
$('#udost, #udost_stat').css('display', 'inline');
}
});
function countDownchars (element_id, maxchars) {
$('#'+element_id).keyup(function (){
number = $('#'+element_id).val().length;
if(number <= maxchars){
$('#'+element_id+'_stat').html(maxchars-number).css('color', '#000');
}
if(number == maxchars) {
$('#'+element_id).attr({ maxlength: maxchars});
$('#'+element_id+'_stat').css('color', '#f00');
}
});
}
</script>
