从输入中删除只读 [英] remove readonly from input

问题描述

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

I have a pice of code that copy 2 3 divs and the div contains a readonly property.

此后，我有一个按钮，当我单击该按钮时说要进行编辑，这将删除只读字段，并且可以编辑输入字段.

After that I have a button that says to edit when I click on that button this should remove the readonly and the input field is available to edit.

我的代码无效！

我的JavaScript代码:

my javascript code:

我尝试了 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>

我希望当我单击编辑"时，只读的内容消失，然后单击保存"，然后再次返回只读的内容.

I hope that when i click on edit the readonly disappear and after a click on save and the readonly back again.

感谢您的帮助

PS:删除"按钮有效！

PS: the remove button works!

推荐答案

使用 .attr 可能会更好，因为 readonly 是属性，而不是属性.请参见此(具体来说，属性与属性)

You may have better luck with .attr as readonly is an attribute and not a property. See this (Specifically, attributes vs properties)

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

One issue I see with your code is this line here: $(this).parents(".control-group").removeAttr('readonly');

您正试图从 div 中删除readonly属性.我认为您的意思是从 .form-control (它是 input

You are trying to remove the readonly attribute from a div. I think you mean to remove it from your .form-control which is an input

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

Maybe try $(this).parents(".control-group").find('input.form-control').removeAttr('readonly'); (i'd do some null checks here. Plenty can go wrong if the selector fails)

这是一个使用jQuery切换 readonly 属性的基本示例

Here's a basic example of how to toggle the readonly attribute using jQuery

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>

这篇关于从输入中删除只读的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！