如何在同一类的多个文本框上将readonly属性设置为false？ [英] How to set readonly property to false on multiple textboxes with same class?

问题描述

我有以下三个控件，它们都具有相同的类名为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 =sqlclass =txt11< input readonly =name =txtSkill []value =databaseclass =txt11> >< input readonly =name =txtSkill []value =mysqlclass =txt11>< input type =buttonvalue =Editname =btnEdit11id =btnXyz2 class =btn11/>  

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

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

这个问题来自焦点 $（。txt11）。focus（）; 有类 txt11 ，所以你应该指定一个你想要关注的类，例如：

  $：重点（）;（ txt11当量（0））。 //聚焦第一个输入
  

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

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

$（。btn11）。click（function（）{$（。txt11 ）.prop（readonly，false）; $（。txt11：eq（0））。focus（）;}）;

snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min。 js>< / script>< input readonly =name =txtSkill []value =databaseclass =txt11>< input readonly =name =txtSkill []value =sqlclass =txt11>< input readonly =name =txtSkill []valu e =mysqlclass =txt11>< input type =buttonvalue =Editname =btnEdit11id =btnXyz2class =btn11/>
$ b

按小组编辑：

  var last_class ='txt11'; $（。btn11）。click（function（）{$（。txt11）。道具（只读，假）; $（。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 =databaseclass =txt10>< input readonly =name =txtSkill []value =sqlclass =txt10>< input readonly =name =txtSkill []value =mysqlclass =txt10>< input readonly =name =txtSkill []value =database class =txt11>< input readonly =name =txtSkill []value =sqlclass =txt11 >< input readonly =name =txtSkill []value =mysqlclass =txt11>< input readonly =name =txtSkill []value =databaseclass = txt12>< input readonly =name =txtSkill []value =sqlclass =txt12>< input readonly =name =txtSkill []value =mysqlclass =txt12>< input type =buttonvalue =Editname =btnEdit11id =btnXyz2class =btn11/>  

I have the following three controls which all have same class named "txt11" and I want to change the readonly property of all three textboxes to false whenever I click edit button.

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

The reason why I am using same class is that I am rendering these input boxes dynamically at run time so I am not sure how many textboxes will be rendered.

But only the last textbox is being set to readonly=false the above input boxes are still set readonly.

解决方案

The problem come from the focus $(".txt11").focus(); that will focus the last occurrence that have the class txt11, so you should specify the one you want to focus, e.g :

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

The prop by class will assign the attribute to all inputs.

NOTE : you can't focus the readonly fields, so you should add the focus statement after setting the readonly to 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"/>

Focus by group edit :

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

这篇关于如何在同一类的多个文本框上将readonly属性设置为false？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！