JQuery Klasse Wähler auf zwei Eingabeelemente und zwei Tasten

Question

I JQuery auf zwei Eingangstextelementen bin mit (den readonly sind) und zwei Tasten, so dass, wenn die Taste 1 nur angeklickt wird Eingang 1 sollte gelesen werden/schreiben. Und wenn Taste 2 angeklickt wird, sollte nur Eingang 2 lesen/schreiben. Und wenn die entsprechende Schaltfläche erneut angeklickt wird, sollte der entsprechende Eingang erneut gelesen werden. Aber mein folgendes Skript ändert das Readonly-Attribut beider Eingaben unabhängig davon, auf welche Schaltfläche geklickt wurde. Ich dachte, nur ein Ereignis für diesen speziellen Eingang ausgelöst werden soll, wie hier durch einen here Benutzer erklärte

HINWEIS: Ich weiß, dass wir id statt Klassenauswahl aber in meinem realen Szenario der Eingangs- und Tasten-Tags dynamisch erzeugt werden können über eine Schleife und die Daten stammen aus einer Datenbank. Daher wissen wir nicht, wie viele solche Elemente jedes Mal erstellt werden. Und wie der Benutzer in dem oben erwähnten Link darauf hingewiesen hat, sollte nur ein Klick-Ereignis für eine entsprechende Schaltfläche ausgelöst werden. Also die Frage ist wirklich, wie wir dieses Szenario erreichen können, da das unten angegebene Beispiel in einem solchen Szenario nicht funktionieren wird.

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') 
     } 
    }); 
}); 

Seitenanzeige:

Answer 1

Sie können die vorherige TD der angeklickten Schaltfläche Ziel, und finden Sie die Eingabe

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

ich es etwas anders aus adeneo kodieren würde. Ich würde gehen in die nächste Zeile und dann den Text so etwas wie diese finden:

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

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

Alternativ können Sie ein Attribut auf die Schaltfläche haben haben die ID der Textbox Sie so die html verändern wollte müssten Änderungen ids haben:

<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> 

und die Javascript wäre:

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

ich würde in der folgenden Art und Weise für jede Taste, eine benutzerdefinierte Datenattribut gesetzt:

 <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> 

Dann könnten Sie im Click-Handler nach diesem benutzerdefinierten Attribut fragen.

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

Sie haben erwähnt, dass diese Elemente dynamisch generiert werden. Ich sehe, das ist kein Problem für dynamische IDs. Sie können eine "inputName_index" wie ID haben, wenn Sie die Eingaben generieren.