JQuery的類選擇

Question

我使用JQuery對兩個輸入的文本元素（即是readonly）和兩個按鈕，使按鈕1被點擊時僅輸入1應成爲讀/寫。並且，當按鈕2被點擊時，只有輸入2應該變爲可讀/寫。當再次點擊相應的按鈕時，相應的輸入應該再次只讀。但是我的後續腳本改變了這兩個輸入的只讀屬性，不管點擊哪個按鈕。我想只有一個事件應該針對特定輸入被解僱這裏用戶解釋here

注意：我知道我們可以用它代替類選擇，但我的真實的情景是動態生成的輸入和按鈕標籤ID通過循環，數據來自數據庫。因此，我們不知道每次會創建多少這樣的元素。而且，正如上面提到的鏈接中的用戶所指出的，只有一個點擊事件應該爲相應的按鈕觸發。所以問題是我們如何實現這種情況，因爲下面給出的例子不適用於這種情況。

HTML：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <input class="txtInput" type="text" name="test1" value="test1val" readonly/> 
      </td> 
      <td> 
       <input type="button" class="btnEdit" name="editName" value="Edit"/> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input class="txtInput" type="text" name="test2" value="test2val" readonly /> 
      </td> 
      <td> 
       <input type="button" class="btnEdit" name="editName" value="Edit" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

JQuery的：

$(document).ready(function() { 
    $('.btnEdit').click(function() { 
     if ($('.txtInput').prop('readonly')) { 
      $('.txtInput').removeAttr('readonly'); 
     } 
     else { 
      $('.txtInput').attr('readonly', 'readonly') 
     } 
    }); 
}); 

頁顯示：

Answer 1

您可以針對點擊按鈕以前TD，並找到輸入

$(document).ready(function() { 
 
    $('.btnEdit').on('click', function() { 
 
     $('table .txtInput').prop('readonly', true); 
 
     var elem = $(this).closest('td').prev('td').find('.txtInput'); 
 
     elem.prop('readonly', function(_,state) { return !state }); 
 
    }); 
 
});

input[readonly] {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
      <td><input class="txtInput" type="text" name="test1" value="test1val" readonly/></td> 
 
      <td><input type="button" class="btnEdit" name="editName" value="Edit" /></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input class="txtInput" type="text" name="test2" value="test2val" readonly /></td> 
 
      <td><input type="button" class="btnEdit" name="editName" value="Edit" /></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

我從adeneo略有不同的代碼吧。我會去到最近的行，然後找到文本，是這樣的：

$(document).ready(function() { 
    $('.btnEdit').on('click', function() { 

     var elem = $(this).closest('tr').find('.txtInput'); 
     elem.prop('readonly', function(_,state) { return !state }); 
    }); 
}); 

或者，你可以有按鈕的屬性有你想改變文本框的ID，因此HTML代碼將有更改爲有ID：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
    <tbody> 
     <tr> 
      <td><input class="txtInput" id='txt1' type="text" name="test1" value="test1val" readonly/></td> 
      <td><input type="button" txtid='#txt1' class="btnEdit" name="editName" value="Edit" /></td> 
     </tr> 
     <tr> 
      <td><input class="txtInput" id='txt2' type="text" name="test2" value="test2val" readonly /></td> 
      <td><input type="button" txtid='#txt2' class="btnEdit" name="editName" value="Edit" /></td> 
     </tr> 
    </tbody> 
</table> 

和JavaScript將是：

$(document).ready(function() { 
    $('.btnEdit').on('click', function() { 
     var txtid = $(this).attr('txtid'); 
     $(".txtInput").each(function(){ 
       if ($(this).attr('id')!=txtid) 
       { 
        $(this).prop('readonly',true); 
       } 
     }); 
     var elem = $(); 
     elem.prop('readonly', function(_,state) { return !state }); 
    }); 
}); 

Answer 3

我會設置一個自定義的數據屬性爲每個按鈕，以下列方式：

 <td><input class="txtInput" type="text" id="test2" name="test2" value="test2val" readonly /></td> 
     <td><input type="button" class="btnEdit" data-attr-target="test2" name="editName" value="Edit" /></td> 

然後，您可以在點擊處理程序中請求該自定義屬性。

$('.btnEdit').click(function(){ 
    var target = $(this).data('attr-target'); 
    var input = $(target); 
    input.attr('readonly', readonly); 
}); 

您提到這些元素是動態生成的。我認爲這對於擁有動態ID是沒有問題的。在生成輸入時，你可能有一個「inputName_index」類似的id。