So entfernen Sie Readonly Requisite von allen obigen Elementen auf Buttonclick

Question

Ich habe ein Formular mit Eingabefeld, wo readonly wahr ist.

ich auch eine Bearbeitungsschaltfläche haben, ich will es machen, so dass, wenn die Schaltfläche Bearbeiten für diese Zeile alle Eingabefelder angeklickt wird, wird nur lesbar falsch haben, , aber ich weiß nicht, wie man Ziel alle TD> Eingabe innerhalb dieser TR.

Danke.

Der Code.

<tr> 
<td> 
    <img src="http://placehold.it/150x150" alt=""> 
</td> 
<td> 
    <input name="textinput" placeholder="" value="Olympus E-M1 mark II Body" class="" type="text" style="width: 100%;" readonly> 
</td> 
<td> 
    <input name="textinput" placeholder="" value="Olympus" class="" type="text" style="width: 100%;" readonly> 
</td> 
<td> 
    <input name="textinput" placeholder="" value="1" class="" type="text" style="width: 100%;" readonly> 
</td> 
<td> 
    <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly> 
</td> 
<td class="total-price"> 
    <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly> 
</td> 
<td> 
    <a href="#"> 
     // The edit button 
     <i class="fa fa-edit" style="color: #C7225C; font-size: 20px;"></i> 
    </a> 
    <a href="#"> 
     <i class="fa fa-trash" style="color: #C7225C; font-size: 20px;"></i> 
    </a> 
</td> 

Answer 1

$('.fa-edit').parent().click(function(e) { 
 
    e.preventDefault() 
 
    $(this).closest('tr').find('input').removeAttr('readonly') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
    <tr> 
 
    <td> 
 
     <img src="http://placehold.it/150x150" alt=""> 
 
    </td> 
 
    <td> 
 
     <input name="textinput" placeholder="" value="Olympus E-M1 mark II Body" class="" type="text" style="width: 100%;" readonly> 
 
    </td> 
 
    <td> 
 
     <input name="textinput" placeholder="" value="Olympus" class="" type="text" style="width: 100%;" readonly> 
 
    </td> 
 
    <td> 
 
     <input name="textinput" placeholder="" value="1" class="" type="text" style="width: 100%;" readonly> 
 
    </td> 
 
    <td> 
 
     <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly> 
 
    </td> 
 
    <td class="total-price"> 
 
     <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly> 
 
    </td> 
 
    <td> 
 
     <a href="#"> 
 
     // The edit button 
 
     <i class="fa fa-edit" style="color: #C7225C; font-size: 20px;"></i> 
 
    </a> 
 
     <a href="#"> 
 
     <i class="fa fa-trash" style="color: #C7225C; font-size: 20px;"></i> 
 
     </a> 
 
    </td> 
 

 
</table>

Verwendung .removeAttr()

Beschreibung: Entfernen ein Attribut von jedem Element in dem Satz von abgestimmten Elementen.

HINWEIS:

1. Wenn dynamisch hinzugefügt Verwendung Ereignis Delegation
2. ich hinzugefügt, um die Klick-Tag zu verankern, so dass ich .parent()

hinzugefügt

Answer 2

Verwendung
$('input[name=textinput]').removeProp('readonly');
oder versuchen
$('input[name=textinput]').removeAttr('readonly');

Blick an diesem https://jsfiddle.net/shantaram/fhde3d06/

Answer 3

Ändern Sie HTML als

<a href="#" class="edit"> 
    // The edit button 
    <i class="fa fa-edit" style="color: #C7225C; font-size: 20px;"></i> 
</a> 

Fügen Sie den Event-Handler mit der Bearbeitungsschaltfläche ein, und durchlaufen Sie dann tr mit .closest(). Danach .find() kann verwendet werden, um gezielt auf :inputremoveProp()

$('.edit').on('click', function(e){ 
    e.preventDefault() 
    $(this).closest('tr').find(':input').removeProp('readonly'); 
}) 

Answer 4

$('.button').on('click', function(){ 
    var $this = $(this), 
     tr = $this.closest('tr'); 

    tr.find('input[type="text"]').attr("readonly", false); 
}); 

Sie können versuchen, prop stattdessen zu verwenden von attr.