javascript - 从输入中删除只读

Question

我有一段代码复制了 2 3 个 div，并且 div 包含一个只读属性。

之后我有一个按钮，当我单击该按钮时，它会显示要编辑，这应该删除只读并且输入字段可用于编辑。

我的代码不起作用!

我的 JavaScript 代码:

我试过removeAttr、prop('readonly', false)、attr('readonly', false)

  $("body").on("click", ".btn",function(){ 
        if($(this).is("#edit")){
         $(this).parents(".control-group").removeAttr('readonly');
        }else if($(this).is("#save")){

        }else if($(this).is("#remove")){
          $(this).parents(".control-group").remove();
    }
  });

我复制的div:

<div class="control-group input-group" style="margin-top:10px">
  <input id="rule" type="text" class="form-control" readonly>
  <div class="input-group-btn">
    <button id="edit" class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Edit</button><button id="remove" class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
  </div>
</div>

我希望当我点击编辑时只读消失，点击保存后只读又回来了。

感谢帮助

PS:删除按钮有效!

Answer 1

使用 .attr 可能会更好，因为 readonly 是一个 attribute 而不是 property。参见 this (具体而言，属性与特性)

我在您的代码中看到的一个问题是此处的这一行: $(this).parents(".control-group").removeAttr('readonly');

您正在尝试从 div 中删除只读属性。我想你的意思是从你的 .form-control 中删除它，这是一个 input

也许试试 $(this).parents(".control-group").find('input.form-control').removeAttr('readonly');(我会的这里有一些空检查。如果选择器失败，很多地方都可能出错)

这是一个基本示例，说明如何使用 jQuery 切换 readonly 属性

var readonly = true;
$('button').on('click', (e) => {
  readonly = !readonly
  $('input').attr('readonly', readonly);
  // Extra
  if (readonly) {
    $('input').attr('placeholder', "I'm readonly");
  } else {
    $('input').attr('placeholder', "I'm not readonly");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input readonly placeholder="I'm readonly" />
<button>Toggle Readonly</button>