使用jQuery删除只读属性

Question

 <script type="text/javascript"> $('.show_edit').click(function() { $(this).hide(); $(this).siblings('.edit_faq').show(); $(this).parent().prev().find('.remove_att').removeAttr( "readonly" ); // this working perfect $(this).next().find('.remove_text').removeAttr( "readonly" ); // this is not working }); </script> 

 <?php foreach ($faq as $faq): ?> <div class="form-group"> <label class="col-sm-2 control-label">Question : </label> <div class="col-sm-8"> <input type="text" id="question" class="form-control remove_att" value="<?php echo $faq['faq_question'] ?>" placeholder="Enter the question" readonly="readonly" required=""> </div> <div class="col-sm-2" class="edit_all"> <button type="button" class="btn btn-warning btn-sm show_edit" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="fa fa-edit"></i></button> <button type="button" id="<?php echo $faq['faq_id'] ?>" class="btn btn-success btn-sm edit_faq" data-toggle="tooltip" data-placement="bottom" title="Save" style="display: none"><i class="fa fa-floppy-o" ></i></button> <button type="button" class="btn btn-danger btn-sm delete_faq" id="<?php echo $faq['faq_id'] ?>" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fa fa-trash"></i>&nbsp;Delete</button> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Answer : </label> <div class="col-sm-8"> <textarea class="form-control remove_text" id="answer" rows="5" placeholder="Type your answer..." required="required" readonly ><?php echo $faq['faq_answer'] ?></textarea> </div> </div> <?php endforeach; ?> 

i'm doing inline edit using save and edit button with the help of jquery. when i click on edit button input type="text" and textarea remove the readonly attribute. where input type="text" is working correctly,now i want to remove the readonly from textarea how to do this, any help would be appreciated

Answer 1

Your .show_edit button wrapped in 2 divs:

div.edit_all and div.form-group

And, your textarea is located in the next div.form-group , So, try this:

$('.show_edit').click(function() {
    $(this).hide();
    $(this).siblings('.edit_faq').show();
    $(this).parent().prev().find('.remove_att').removeAttr( "readonly" );
    $(this).closest('.form-group').next().find('.remove_text').removeAttr( "readonly" );
         // ^find the closest div.form-group parent 
});

Answer 2

You can find parent of .show_edit then again find its parent.

Your textarea is present in next div where we find .remove_text class for remove readonly

so try this :

<script type="text/javascript">
    jQuery(document).ready(function(){
     $('.show_edit').click(function() {
        $(this).hide();
        $(this).siblings('.edit_faq').show();
        $(this).parent().prev().find('.remove_att').removeAttr( "readonly" ); 
        $(this).parent().parent().next().find('.remove_text').removeAttr( "readonly" ); 
     })
    });   
</script>