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

user_5001845 0
Viewed 43

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);
         } 
       });
html jquery javascript
3 Answers

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

user_45899170

Is this solve your problem?

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

user_140526420 

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

try this

user_189731110
Related