remove readonly attribute using jquery

<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

Answers 1

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

Related Articles