jquery修改input属性？js修改input的value不生效
大家好，关于jquery修改input属性很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于js修改input的value不生效的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
jquery怎样修改input的name
方法及操作步骤如下：
1、首先，创建一个新的html文件，如下图所示。
2、其次，创建一个表单，如下图所示。
3、接着，单击创建按钮，如下图所示。
4、然后，预览效果如下图所示。
5、随后，引入jquery.js，如下图所示。
6、接着，点击按钮jQuery隐藏所有 type="checkbox"的 input元素，如下图所示。
7、最后，单击按钮预览效果，如下图所示。
如何利用jquery来给input添加或删除disabled属性全部方法总结
一、以下二种方法是可以为input添加disabled属性的方法
1、$('#areaSelect').attr("disabled",true)
2、$('#areaSelect').attr("disabled","disabled")
二、以下三种方法是移除（去除）掉input的disabled属性的方法
1、$('#areaSelect').attr("disabled",false)
2、$('#areaSelect').removeAttr("disabled")
3、$('#areaSelect').attr("disabled","")
三、移除或者删除所有input和select控件的disabled属性
1、移除所有select控件的disabled属性
$("select").each(function(){$(this).attr("disabled","");})
2、移除所有input控件的disabled属性:
$("input").attr("disabled","");
扩展资料
1、jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2、disabled属性是控制这个控件是否可编辑、可用。disabled:true就是不可用，disabled:false就是可用。
jQuery中attr和prop在修改checked属性时的区别
没有太大区别。一般情况下具有 true和 false两个属性的属性，如 checked, selected或者 disabled使用prop()，其他的使用 attr()。
以下来自网络，有兴趣可阅读：
jQuery1.6开始新增了一个方法prop()。
从中文意思看，两者分别是获取/设置attributes和properties的方法，那么为什么还要增加prop()方法呢？
BeforejQuery1.6,the.attr()methodsometimestookpropertyvaluesintoaccountwhenretrievingsomeattributes,whichcouldcauseinconsistentbehavior.
因为在jQuery1.6之前，使用attr()有时候会出现不一致的行为。
那么，什么时候使用attr()，什么时候使用prop()？
ToretrieveandchangeDOMpropertiessuchasthechecked,selected,ordisabledstateofformelements,usethe.prop()method.
根据官方的建议：具有true和false两个属性的属性，如checked,selected或者disabled使用prop()，其他的使用attr()
到此，将attr('checked')改成prop('checked')即可修复提的issues了。
^_^
等等，貌似问题还没真正解决，为什么开头例子中jQuery1.8.3和1.9.0使用attr()会有所区别呢？
想知道他们的区别，最好的办法还是看他们的源代码：
1.8.3attr()：
attr:function(elem,name,value,pass){
varret,hooks,notxml,
nType=elem.nodeType;
//don'tget/setattributesontext,commentandattributenodes
if(!elem||nType===3||nType===8||nType===2){
return;
}
if(pass&&jQuery.isFunction(jQuery.fn[name])){
returnjQuery(elem)[name](value);
}
//Fallbacktopropwhenattributesarenotsupported
if(typeofelem.getAttribute==="undefined"){
returnjQuery.prop(elem,name,value);
}
notxml=nType!==1||!jQuery.isXMLDoc(elem);
//Allattributesarelowercase
//Grabnecessaryhookifoneisdefined
if(notxml){
name=name.toLowerCase();
hooks=jQuery.attrHooks[name]||(rboolean.test(name)?boolHook:nodeHook);
}
if(value!==undefined){
if(value===null){
jQuery.removeAttr(elem,name);
return;
}elseif(hooks&&"set"inhooks&¬xml&&(ret=hooks.set(elem,value,name))!==undefined){
returnret;
}else{
elem.setAttribute(name,value+"");
returnvalue;
}
}elseif(hooks&&"get"inhooks&¬xml&&(ret=hooks.get(elem,name))!==null){
returnret;
}else{
ret=elem.getAttribute(name);
//Non-existentattributesreturnnull,wenormalizetoundefined
returnret===null?
undefined:
ret;
}
}
1.9.0attr()：
attr:function(elem,name,value){
varret,hooks,notxml,
nType=elem.nodeType;
//don'tget/setattributesontext,commentandattributenodes
if(!elem||nType===3||nType===8||nType===2){
return;
}
//Fallbacktopropwhenattributesarenotsupported
if(typeofelem.getAttribute==="undefined"){
returnjQuery.prop(elem,name,value);
}
notxml=nType!==1||!jQuery.isXMLDoc(elem);
//Allattributesarelowercase
//Grabnecessaryhookifoneisdefined
if(notxml){
name=name.toLowerCase();
hooks=jQuery.attrHooks[name]||(rboolean.test(name)?boolHook:nodeHook);
}
if(value!==undefined){
if(value===null){
jQuery.removeAttr(elem,name);
}elseif(hooks&¬xml&&"set"inhooks&&(ret=hooks.set(elem,value,name))!==undefined){
returnret;
}else{
elem.setAttribute(name,value+"");
returnvalue;
}
}elseif(hooks&¬xml&&"get"inhooks&&(ret=hooks.get(elem,name))!==null){
returnret;
}else{
//InIE9+,Flashobjectsdon'thave.getAttribute(#12945)
//Support:IE9+
if(typeofelem.getAttribute!=="undefined"){
ret=elem.getAttribute(name);
}
//Non-existentattributesreturnnull,wenormalizetoundefined
returnret==null?
undefined:
ret;
}
}
1.8.3和1.9.0的prop()是一样的:
prop:function(elem,name,value){
varret,hooks,notxml,
nType=elem.nodeType;
//don'tget/setpropertiesontext,commentandattributenodes
if(!elem||nType===3||nType===8||nType===2){
return;
}
notxml=nType!==1||!jQuery.isXMLDoc(elem);
if(notxml){
//Fixnameandattachhooks
name=jQuery.propFix[name]||name;
hooks=jQuery.propHooks[name];
}
if(value!==undefined){
if(hooks&&"set"inhooks&&(ret=hooks.set(elem,value,name))!==undefined){
returnret;
}else{
return(elem[name]=value);
}
}else{
if(hooks&&"get"inhooks&&(ret=hooks.get(elem,name))!==null){
returnret;
}else{
returnelem[name];
}
}
}
首先，我们看下attr()和prop()的区别：
attr()里面，最关键的两行代码
elem.setAttribute(name,value+"");
ret=elem.getAttribute(name);
很明显的看出来，使用的DOM的APIsetAttribute()和getAttribute()方法操作的属性元素节点。
prop()里面，最关键的两行代码
return(elem[name]=value);
returnelem[name];
可以理解为document.getElementById(el)[name]=value，这是转化成element的一个属性。
对比调试1.9.0和1.8.3的attr()方法，发现两者的区别在于
hooks.get(elem,name))
返回的值不一样，具体的实现：
1.8.3中
boolHook={
get:function(elem,name){
//Alignbooleanattributeswithcorrespondingproperties
//Fallbacktoattributepresencewheresomebooleansarenotsupported
varattrNode,
property=jQuery.prop(elem,name);
returnproperty===true||typeofproperty!=="boolean"&&(attrNode=elem.getAttributeNode(name))&&attrNode.nodeValue!==false?
name.toLowerCase():
undefined;
}
}
1.9.0中
boolHook={
get:function(elem,name){
var
//Use.proptodetermineifthisattributeisunderstoodasboolean
prop=jQuery.prop(elem,name),
//Fetchitaccordingly
attr=typeofprop==="boolean"&&elem.getAttribute(name),
detail=typeofprop==="boolean"?
getSetInput&&getSetAttribute?
attr!=null:
//oldIEfabricatesanemptystringformissingbooleanattributes
//andconflateschecked/selectedintoattroperties
ruseDefault.test(name)?
elem[jQuery.camelCase("default-"+name)]:
!!attr:
//fetchanattributenodeforpropertiesnotrecognizedasboolean
elem.getAttributeNode(name);
returndetail&&detail.value!==false?
name.toLowerCase():
undefined;
}
}
由此可见，1.9.0开始不建议使用attr()来对具有true和false两个属性的属性进行操作了。
那么我们的结论是：
具有true和false两个属性的属性，如checked,selected或者disabled使用prop()，其他的使用attr()，具体见下表：
好了，文章到这里就结束啦，如果本次分享的jquery修改input属性和js修改input的value不生效问题对您有所帮助，还望关注下本站哦！