How to make only those textboxes readonly which doesnt have any value in it,using jquery?

Issue

This what I am trying to accomplish : when user clicks on any one of the text boxes,its readonly gets removed,but rest of the text boxes must remain readonly only if it has no values in it,but I am getting it as readonly for rest of the boxes(even if the textbox contains some x values)

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 I have tried :

$(document).on('focus', '.rate', function(){
           $(this).removeAttr("readonly");
         if($('.rate').val() == ''){
          $('.rate').not(this).attr("readonly", true);
         } 
       });

Solution

$('.rate').val() is most likely not what you expect it to be.
$('.rate') is an array of all elements with the class .rate. When you do something like $('.rate').val(), jQuery will always use the first element in that array to evaluate the expression.

But you want to check every single element so you have to iterate over that array and check each element individually:

$('.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=""/>

Answered By – Lapskaus

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.