使用jquery删除只读属性 - remove readonly attribute using jquery

remove readonly attribute using jquery

本文关键字：只读属性删除 jquery 使用 | 更新日期: 2024-01-24

<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="answerswer" rows="5" placeholder="Type your answer..." required="required" readonly ><?php echo $faq['faq_answer'] ?></textarea>
        </div>
    </div>
<?php endforeach; ?>

我正在jquery的帮助下使用保存和编辑按钮进行内联编辑。当我点击编辑按钮输入type="text"和textarea删除只读属性。如果input type="text"工作正常，现在我想从text区域删除readonly如何做到这一点，任何帮助都将不胜感激

您的.show_edit按钮包含在两个div中：

div.edit_all和div.form-group

并且，您的文本区域位于下一个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 
});

您可以找到.show_edit的父级，然后再找到它的父级。

您的文本区域出现在我们找到的下一个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>