jquery 设置只读属性

最新推荐文章于 2023-09-27 09:05:01 发布

转载最新推荐文章于 2023-09-27 09:05:01 发布 · 2.5k 阅读

前端问题专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用JQuery动态地为HTML输入元素设置和移除readonly及disabled属性，包括不同方法的对比和使用场景说明，以及这两个属性在表单提交过程中的行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，jquery 设置readonly属性


$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').removeAttr("readonly");//去除input元素的readonly属性
  
if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性

例2，对于为元素设置readonly属性和取消readonly属性的方法


$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
 
$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').attr("readonly","")//去除input元素的readonly属性

2，jquery 设置disabled属性


$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').removeAttr("disabled");//去除input元素的disabled属性
  
if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性

例2，对于为元素设置disabled属性和取消disabled属性的方法


$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性
 
$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').attr("disabled","")//去除input元素的disabled属性

3，jquery动态添加文本框的readonly只读属性


<input id="id" type="text"  />
 
 $("#id").attr({"readonly":"readonly"}); //添加readonly属性 & $("#ID").attr({ readonly: 'true' });
 $("#id").removeAttr("readonly");    //去除readonly属性
);

注意，注意，注意！！！

disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

文章来源:https://blog.youkuaiyun.com/u012060033/article/details/82458418