usuń atrybut readonly z wielu pól klikając przycisk w jquery

Question

Mam tabelę ze szczegółami ucznia. Te pola są tylko do odczytu i można je edytować po kliknięciu przycisku edycja. Ale mam problem z zaznaczeniem wszystkich pól wejściowych w tym wierszu naraz, klikając przycisk edytuj.

Oto mój kod html

<table class="table table-bordered table-striped"> 
      <thead> 
      <tr> 
       <th>Checklist</th> 
       <th>Id</th> 
       <th>Student Name</th> 
       <th>Address</th> 
       <th>Phone</th> 
       <th>Class</th> 
       <th colspan="2">Actions</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td> 
       <input type="checkbox" id="editCheck" class="btn1" /> 
       <input type="checkbox" id="deleteCheck" /> 
       </td> 
       <td>1</td> 
       <td><input type="text" class="form-control item" readonly="readonly" /></td> 
       <td><input type="text" class="form-control item" readonly="readonly" /></td> 
       <td><input type="text" class="form-control item" readonly="readonly" /></td> 
       <td>12</td> 
       <td><button type="button" class="btn btn-info btn-xs" id="btn1">Edit</button></td> 
       <td><button type="button" class="btn btn-danger btn-xs" id="dbtn1">Delete</button></td> 
      </tr> 
      <tr> 
       <td> 
       <input type="checkbox" id="editCheck" class="btn2" /> 
       <input type="checkbox" id="deleteCheck" /> 
       </td> 
       <td>1</td> 
       <td><input type="text" class="form-control item" readonly="readonly" /></td> 
       <td><input type="text" class="form-control item" readonly="readonly" /></td> 
       <td><input type="text" class="form-control item" readonly="readonly" /></td> 
       <td>12</td> 
       <td><button type="button" class="btn btn-info btn-xs" id="btn2">Edit</button></td> 
       <td><button type="button" class="btn btn-danger btn-xs" id="dbtn2">Delete</button></td> 
      </tr> 
      </tbody> 
     </table> 

A oto jQuery. Zaznaczam pole wyboru po naciśnięciu przycisku edycji.

$(document).ready(function(){ 
    $('.btn.btn-info.btn-xs').click(function(){ 

     var newClass = $(this).attr('id'); 

     $('.'+newClass).prop('checked','true'); 
    }); 
    }); 
</script> 

Answer 1

Można po prostu dodać to do swojego przewodnika

$(this).closest('tr').find('input').removeAttr('readonly'); 

Który znajdzie tr zawierający przycisk klikniętego click, lokalizuje wszystkie jego input elementów i usuwa swoje Atrybut readonly.

żywo przykład: http://jsfiddle.net/zxsq0m5n/

Nawiasem mówiąc, można użyć tej samej sztuczki, aby zlokalizować checkbox, negując potrzebę związać je razem z przycisku Edytuj przy użyciu ID/klasa

$('.btn.btn-info.btn-xs').click(function(){ 

    var $tr = $(this).closest('tr')   
    $tr.find('input:checkbox').first().prop('checked','true'); 
    $tr.find('input').removeAttr('readonly'); 
}); 

żywo przykład: http://jsfiddle.net/zxsq0m5n/1/

Answer 2

Można aktualizować swój kod do następujących

Logic - Pobiera wiersz tr czyli rodzica rodzica wejście -> tr -> td -> przycisk. Następnie dla tego wiersza znajdź wszystkie dane wejściowe i usuń atrybut. Należy pamiętać, można dodać warunki, jeśli wymagane

$('.btn.btn-info.btn-xs').click(function(){ 

    var newClass = $(this).attr('id'); 

    $('.'+newClass).prop('checked','true'); 
    $(this).parent().parent().find("input").each(function(){ 
     $(this).removeAttr("readonly"); 
    }); 
}); 

Answer 3

$('.btn.btn-info.btn-xs').on('click', function (e) { 
    var $btn = $(e.currentTarget), 
     newClass = '.' + $btn.attr('id'); 

    $btn 
    .parents('tr') 
     .find(newClass).prop('checked', true) 
     .end() 
     .find('input').removeAttr('readonly'); 
});