如何使用 jquery 使那些没有任何价值的文本框只读？

Question

这是我想要完成的：当用户点击任何一个文本框时，它的只读被删除，但其余的文本框必须保持只读，只有当它没有值时，但我是将其余框设置为只读（即使文本框包含一些 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 我试过了:

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

Answer 1

这是否解决了您的问题？

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

Answer 2

$('.rate').val() 很可能不是您期望的那样。 $('.rate') 是具有 class .rate 的所有元素的数组。当您执行类似 $('.rate').val() 的操作时，jQuery 将始终使用该数组中的第一个元素来计算表达式。

但是您想检查每个元素，所以您必须遍历该数组并单独检查每个元素：

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

Answer 3

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

试试这个

如何使用 jquery 使那些没有任何价值的文本框只读？

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

javascript

html

jquery