单击编辑glyphicon将只读输入字段转换为可编辑

Question

首先，我很抱歉我无法发布任何代码，因为我真的不知道该怎么做。我会尝试解释我的设计。假设页面中有一个只读输入。除了那个输入空间，我有一个编辑glyphicon。我必须单击它才能使该字段可编辑。当我按Enter键时，输入字段变为只读，并带有我输入的值。我以某种形式看过这个，但不知道该怎么做。任何人都可以提供有关如何实现这一点的任何指示？提前谢谢！

Answer 1

这样的东西？ Here is a fiddle

HTML：

<div class="col-xs-6">
    <div class="input-group">
      <input type="text" class="form-control disable" disabled="disabled">
      <span class="input-group-btn">
        <button class="btn btn-default editBtn" type="button"><i class="glyphicon glyphicon-pencil"></i></button>
      </span>
    </div>
</div>

和JS：

$('.editBtn').on('click', function(event) {
        event.preventDefault();

        if ($('.disable').attr('disabled')){
            $('.disable').removeAttr('disabled');
        }else{
            $('.disable').attr('disabled', 'disabled');
        }
 });