如何使用jquery僅將那些沒有任何價值的文本框設為只讀？

這是我想要完成的：當用戶點擊任何一個文本框時，它的只讀被洗掉，但其余的文本框必須保持只讀，如果它沒有值，但我得到它作為只讀其余的框（即使文本框包含一些 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);
         } 
       });

uj5u.com熱心網友回復：

這能解決你的問題嗎？

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

uj5u.com熱心網友回復：

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

嘗試這個

uj5u.com熱心網友回復：

$('.rate').val()很可能不是您期望的那樣。 $('.rate')是一個包含.rate類的所有元素的陣列。當您執行類似的操作時，jQuery 將始終使用該陣列中的第一個元素來評估運算式。$('.rate').val()

但是您想檢查每個元素，因此您必須遍歷該陣列并單獨檢查每個元素：

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

標籤：javascript html jQuery

上一篇：如何在jQuery中使用生成的選擇值？[復制]

下一篇：如何使用Jquery將HTML元素移到其容器之外？