使用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; ?> 

我正在使用jquery的保存和編輯按鈕進行內聯編輯。 當我單擊編輯按鈕輸入type =“ text”和textarea時，將刪除只讀屬性。 在輸入type =“ text”正常工作的地方，現在我想從textarea刪除readonly如何執行此操作，將不勝感激

Answer 1

您的.show_edit按鈕分為2個div：

div.edit_all和div.form-group

而且，您的textarea位於下一個div.form-group中 ，因此，請嘗試以下操作：

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

您可以找到.show_edit的父級，然后再次找到其父級。

您的textarea存在於下一個div中，我們在其中找到.remove_text類以刪除只讀

所以試試這個：

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