我有以下三个控件,它们的类均名为“txt11”,并且我想在任何时候将所有三个文本框的readonly属性更改为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
,上述输入框仍设置为只读。 最佳答案
问题来自焦点$(".txt11").focus();
,它将聚焦最后一次出现的具有txt11
类的事件,因此您应指定要聚焦的那个,例如:
$(".txt11:eq(0)").focus(); //Focusing the first input
按类的
prop
将属性分配给所有输入。注意:您不能聚焦
readonly
字段,因此应在将readonly
设置为false
之后添加focus语句。$(".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"/>