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

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 >
         <span ><i ></i></span>
          <input type="text"  id= "load_rate1" name="load_rate1" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>
     <div >
         <span ><i ></i></span>
          <input type="text"  id= "load_rate2" name="load_rate2" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>
     <div >
         <span ><i ></i></span>
          <input type="text"  id= "load_rate3" name="load_rate3" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>
     <div >
         <span ><i ></i></span>
          <input type="text"  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);
         } 
       });

CodePudding user response：

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 >
         <span ><i ></i></span>
          <input type="text"  id= "load_rate1" name="load_rate1" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>
     <div >
         <span ><i ></i></span>
          <input type="text"  id= "load_rate2" name="load_rate2" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>
     <div >
         <span ><i ></i></span>
          <input type="text"  id= "load_rate3" name="load_rate3" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>
     <div >
         <span ><i ></i></span>
          <input value="asd"  type="text"  id= "load_rate4" name="load_rate4" onkeypress="return NumberValues(this,event);" maxlength="10" onchange="return decimalNumber(this);" readonly/>
    </div>

CodePudding user response：

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

try this

CodePudding user response：

$('.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 ){
    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"  readonly value="123"/>
  <input type="text"  readonly value=""/>
  <input type="text"  readonly value=""/>
  <input type="text"  readonly value=""/>