jquery中prop&attr之disabled问题

最新推荐文章于 2022-01-13 10:29:39 发布

原创最新推荐文章于 2022-01-13 10:29:39 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

JAVA WEB 专栏收录该内容

80 篇文章

订阅专栏

因为之前遇到过checkBox中关于prop&attr的问题所以后来都比较慎用attr了，但是最近使用prop又遇到了一个问题，描述如下
这里写图片描述
场景描述：只有勾选了协议转出按钮才能用，否则就是灰色禁用的状态，这次用的事prop代码如下

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).prop(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>禁用
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).removeProp(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>去除禁用</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

刚进来页面第一次的时候，禁用是起作用的，但是当我选中了一次快速赎回协议，然后再去除选中之后问题就出现了，上面的代码便不再起作用了，非常奇怪。
现在解决方法如下有五种,经过测试可以解决上述问题：
方法一：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).prop(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>禁用
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).prop(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>去除禁用</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

方法二：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).prop(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>禁用
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).prop(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>去除禁用</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

方法三：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).attr(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>禁用
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).attr(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>去除禁用</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

方法四：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).attr(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>禁用
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).attr(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>去除禁用</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

方法五:

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).attr(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>禁用
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#saleBtn"</span>).removeAttr(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"disabled"</span>);<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>去除禁用</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2<span style="color: rgb(85, 85, 85); font-family: 'microsoft yahei'; line-height: 35px; background-color: rgb(255, 255, 255);"> </span></li></ul>

-----------------------------------------------------------------

设置disabled属性为true即为不可用状态。

document.getElementByIdx("btn").disabled=true;

jquery

$("#btn").attr("disabled",true);

html

<inputtype="button"value="提交"id="btn">

-------------------------------------------------------------------------

如何提交表单中disabled表单域的值示例代码

表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交，可以通过不用disabled而是使用readonly等，但是我认为都并不是最好，下面为大家介绍个不错的解决方案，感兴趣的朋友可以参考下，希望对大家有所帮助如果表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。但是有的时候确实需要提交这个值。
解决方案有很多，比如不用disabled而是使用readonly等，但是我认为都并不是很好（具体原因略）。

我想到一种方案，就是在提交之前，把要提交的表单复制一份，然后把复制后的表单中的所有表单域的disabled属性都置为false，然后提交这个复制后的表单。下面是演示用的代码（将代码保存到一个名为submit.html的文件中即可观察演示效果）。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
<title>
Submit form
</title>
<script>
function doSubmit(form) {
var newForm = form.cloneNode(true);
enableFields(newForm.getElementsByTagName("input"));
enableFields(newForm.getElementsByTagName("textarea"));
enableFields(newForm.getElementsByTagName("select"));
newForm.style.display = "none";
document.body.appendChild(newForm);
newForm.submit();
}
function enableFields(fields) {
for(var i=0;i<fields.length;i++) {
var field = fields[i];
if (field instanceof(Array)) {
for (var j=0;j<field.length;j++) {
field[j].disabled = false;
}
} else {
field.disabled = false;
}
}
}
</script>
</head>
<body>
<form action="submit.html">
<input type="text" name="text" value="tt" disabled/>

<input type="radio" name="radio" value="r1" checked disabled>r1
<input type="radio" name="radio" value="r2">r2

<input type="checkbox" name="checkbox" value="c1">c1
<input type="checkbox" name="checkbox" value="c2" checked disabled>c2

<select name="select" disabled>
<option value="1">1</option>
<option value="2">2</option>
</select>

<textarea name="textarea" disabled>123</textarea>

<input type="button" value="submit" οnclick="doSubmit(this.form)">
</form>
</body>