Esto es lo que estoy tratando de lograr: cuando el usuario hace clic en cualquiera de los cuadros de texto, se elimina su solo lectura, pero el resto de los cuadros de texto deben permanecer solo de lectura si no tiene valores, pero lo obtengo como solo lectura para resto de los cuadros (incluso si el cuadro de texto contiene algunos valores x)
HTML:
<div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate1" name="load_rate1" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate2" name="load_rate2" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate3" name="load_rate3" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate4" name="load_rate4" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div>JS He probado:
$(document).on('focus', '.rate', function(){ $(this).removeAttr("readonly"); if($('.rate').val() == ''){ $('.rate').not(this).attr("readonly", true); } });Lo más probable es que $('.rate').val() no sea lo que espera que sea. $('.rate') es una matriz de todos los elementos con la clase .rate . Cuando hace algo como $('.rate').val() , jQuery siempre usará el primer elemento en esa matriz para evaluar la expresión.
Pero desea verificar cada elemento, por lo que debe iterar sobre esa matriz y verificar cada elemento individualmente:
$('.rate').each(function( i, el ){ // do something with each element // i = index in array, // el = element }); $(document).on('focus', '.rate', function() { $('.rate').each(function( i, el ){ // always trim() the input to when you check for empty fields if($(el).val().trim() === "") $(el).attr('readonly', true); }); $(this).removeAttr("readonly"); }); input[readonly] { border: 1px solid red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="rate" readonly value="123"/> <input type="text" class="rate" readonly value=""/> <input type="text" class="rate" readonly value=""/> <input type="text" class="rate" readonly value=""/>¿Esto resuelve tu problema?
$(".rate").on('focus',function(){ if(!$(this).val()){ $(this).removeAttr("readonly"); } }); .as-console-wrapper{ max-height:100px !important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate1" name="load_rate1" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate2" name="load_rate2" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input type="text" class="form-control text-right rate load_rate" id= "load_rate3" name="load_rate3" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> <div class="input-group"> <span class="input-group-addon icon_change"><i class="fa"></i></span> <input value="asd" type="text" class="form-control text-right rate load_rate" id= "load_rate4" name="load_rate4" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/> </div> $(document).on('focus', '.rate', function(){ $('.rate').each(function(){ if($(this).val() != ''){ $(this).removeAttr("readonly"); } }) });prueba esto