Question

我有以下三个控件，它们都有相同的名为＆＃34; txt11＆＃34;并且我想在任何时候将所有三个文本框的readonly属性更改为false 我点击编辑按钮。

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

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

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

Answer 1

首先允许输入那么焦点 - 你只能聚焦一个输入。

$(".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" />

Answer 2

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

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

按类prop将属性分配给所有输入。

注意：您无法关注readonly字段，因此您应在将readonly设置为false之后添加焦点声明。< / p>

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

按群组编辑重点：

＆＃13;

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;
});

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

Answer 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);
});

Answer 4

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

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

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

4 个答案: