rimuovere l'attributo readonly da più campi sul pulsante di selezione in jquery

Question

Ho una tabella con i dettagli dello studente. Questi campi sono di sola lettura e possono essere modificati facendo clic sul pulsante modifica. Ma ho problemi a selezionare tutti i campi di input di quella riga in una sola volta facendo clic sul pulsante modifica.

Ecco il mio codice 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> 

E qui è il jQuery. Ho selezionato la casella di controllo quando si preme il pulsante di modifica.

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

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

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

Answer 1

Si può semplicemente aggiungere questo nella vostra click gestore

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

che trova il tr contenente il pulsante cliccato, individua tutti i suoi input elementi, e rimuove la loro Attributo readonly.

vivo esempio: http://jsfiddle.net/zxsq0m5n/

Per inciso, si potrebbe usare lo stesso trucco per individuare il checkbox, negando la necessità di legare insieme con il pulsante Modifica utilizzando id/class

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

esempio dal vivo: http://jsfiddle.net/zxsq0m5n/1/

Answer 2

È possibile aggiornare il codice a seguire

Logica - Prendi il fila tr cioè madre di madre di ingresso -> tr -> td -> tasto. Quindi per quella riga trova tutti gli input e rimuovi l'attributo. Si prega di notare è possibile aggiungere le condizioni, se necessario

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