I have a ColdFusion cfform containing:
<cfinput type="text" name="part1" id="part1" tabIndex="1" onblur="enabled()" >
<cfinput type="text" name="part2" id="part2" tabIndex="2" onblur="enabled()" disabled="disabled" >
<cfinput type="text" name="part3" id="part3" tabIndex="3" onblur="enabled()" disabled="disabled" >
What I want is let input box disabled unless its previous one is not empty, so I done this:
function enabled()
{
var curIndex = + ( $( " * : focus " ).attr( " tabIndex " ) );
var curVal = $( ' * : input [ tabIndex=' + curIndex + ' ] ' ).val();
var nextIndex = curIndex + 1;
var nextId = $( ' input [ tabIndex = " ' + nextIndex + ' " ] ' ).attr( " id " );
if ( curVal == "" )
{
nextId.setAttribute( ' disabled ', ' disabled ' );
}
else
{
nextId.removeAttribute( ' disabled ' );
nextId.focus();
}
}
But I stuck with getting curIndex, it appeared " undefined " when I alerted it.
Any suggestion is appreciated.
What about:
$('input[type=text][name^=part]').on('blur',function(){
var el = $(this);
var elNext = el.next('input[type=text][name^=part]');
if(el.val()!=''){
elNext.removeAttr('disabled');
}else{
elNext.attr('disabled',true);
}
});
So you don't need the handlers on inputs:
<cfinput type="text" name="part1" id="part1" tabIndex="1" >
<cfinput type="text" name="part2" id="part2" tabIndex="2" disabled="disabled" >
<cfinput type="text" name="part3" id="part3" tabIndex="3" disabled="disabled" >
Demo