如何在具有相同类的多个文本框上将只读属性设置为 false？答案

【问题标题】：How to set readonly property to false on multiple textboxes with same class?如何在具有相同类的多个文本框上将只读属性设置为 false？
【发布时间】：2016-11-29 10:42:00
【问题描述】：

我有以下三个控件，它们都具有名为“txt11”的相同类，并且我想在任何时候将所有三个文本框的只读属性更改为 false 我点击编辑按钮。

$(".btn11").click(function(){
  $(".txt11").focus();
  $(".txt11").prop("readonly", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly="" name="txtSkill[]" value="database" class="txt11">
<input readonly="" name="txtSkill[]" value="sql" class="txt11">
<input readonly="" name="txtSkill[]" value="mysql" class="txt11">
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

我使用同一个类的原因是我在运行时动态渲染这些输入框，所以我不确定会渲染多少个文本框。

但只有最后一个文本框被设置为readonly=false，上面的输入框仍然设置为只读。

【问题讨论】：

标签： javascript jquery html dynamic

【解决方案1】：

问题来自焦点$(".txt11").focus();，它将关注具有txt11 类的最后一个事件，因此您应该指定要关注的焦点，例如：

$(".txt11:eq(0)").focus(); //Focusing the first input

prop by class 会将属性分配给所有输入。

注意：你不能聚焦readonly字段，所以你应该在将readonly设置为false之后添加聚焦语句。

$(".btn11").click(function(){
    $(".txt11").prop("readonly", false);
    $(".txt11:eq(0)").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly="" name="txtSkill[]" value="database" class="txt11">
<input readonly="" name="txtSkill[]" value="sql" class="txt11">
<input readonly="" name="txtSkill[]" value="mysql" class="txt11">
<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

按组编辑关注：

var last_class = 'txt11';

$(".btn11").click(function(){
  $(".txt11").prop("readonly", false);
  $(".txt11:eq(0)").focus();
});

$('body').on('focus', "input:text", function(){
  var current_class = $(this).prop('class');

  if( $(this).prop('readonly') ){
    if(current_class!=last_class){
      $("."+last_class).prop("readonly", true);
      $("."+current_class).prop("readonly", false);
    }
  }

  last_class = current_class;
});

input[readonly]{
    background-color: #EEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input readonly="" name="txtSkill[]" value="database" class="txt10">
<input readonly="" name="txtSkill[]" value="sql" class="txt10">
<input readonly="" name="txtSkill[]" value="mysql" class="txt10">

<input readonly="" name="txtSkill[]" value="database" class="txt11">
<input readonly="" name="txtSkill[]" value="sql" class="txt11">
<input readonly="" name="txtSkill[]" value="mysql" class="txt11">

<input readonly="" name="txtSkill[]" value="database" class="txt12">
<input readonly="" name="txtSkill[]" value="sql" class="txt12">
<input readonly="" name="txtSkill[]" value="mysql" class="txt12">

<input type="button" value="Edit" name="btnEdit11"id="btnXyz2" class="btn11"/>

【讨论】：

根据我的回答将只读设置为 false 后，您可以专注
所以现在它或多或少与我的答案相同 - 唯一的区别是 .eq 与 :eq
不过，我比你早了重点 ;)
是的，我为 OP 做了一个 sn-p，你必须“改进”：P
谢谢它解决了这个问题。但是我还有一个问题，假设我想在我从文本框中聚焦时将 readonly 属性设置为 true。但这里的情况是我不想放弃只写功能，直到我真正移动到不同的文本框组，即我不离开名称为 txt11 的文本框类。但是如果我说 txt10 然后将所有类名为 txt11 的文本框设置为只读。

【解决方案2】：

首先允许输入然后聚焦 - 你只能聚焦一个输入。

$(".btn11").on("click", function() {
  $(".txt11").prop("readonly", false) // FIRST readonly=false
    .eq(0).focus(); // THEN focus the first
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input readonly="readonly" name="txtSkill[]" value="database" class="txt11">
<input readonly="readonly" name="txtSkill[]" value="sql" class="txt11">
<input readonly="readonly" name="txtSkill[]" value="mysql" class="txt11">
<input type="button" value="Edit" name="btnEdit11" id="btnXyz2" class="btn11" />

【讨论】：

谢谢它解决了这个问题。但是我还有一个问题，假设我想在我从文本框中聚焦时将 readonly 属性设置为 true。但这里的情况是我不想放弃只写功能，直到我真正移动到不同的文本框组，即我不离开名称为 txt11 的文本框类。但是如果我说 txt10 然后将所有类名为 txt11 的文本框设置为只读。

【解决方案3】：

希望 JS Fiddle 适合您的解决方案

<input type="text" readonly="true" value="123" class="test" id="test"  /><br />
<input class="test" readonly="true" type="text" value="123" />
<buton id="editClick">
 Edit
</button>

$("#editClick").on('click', function(){
   $('.test').attr('readonly', false);
});

【讨论】：

【解决方案4】：

单击按钮或您需要的事件使用以下 jquery 代码

$(".classname").prop("readonly", false);

【讨论】：