I have a html table with a column of text boxes (mileage), all of them are disabled when the page loads, and I need that when user clicks on a check box, the text box for that column should be enabled and become a required field, and then if the user unchecks the checkbox, the textbox on that row must be disabled and the required class removed.
我已经具有启用和禁用文本框的功能(列mileage)当用户点击相应的复选框时,但它是用javascript编写的。但是,由于某种原因它只能在IE中工作)。
这是html代码
<tbody>
<c:forEach items="${list}" var="item">
<tr>
<td align="center">
<input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" onchange="enableTextField(this)" />
</td>
<td align="left"><c:out value="${item.numberPlate}"/></td>
<td align="left"><c:out value="${item.driver.fullName}"/></td>
<td align="left"><input type="text" name="mileage_<c:out value="${item.numberPlate}"/>" value="" disabled="true"/></td>
</tr>
</c:forEach>
</tbody>
和 JavaScript 代码:
function enableTextField(r)
{ var node = r.parentNode;
while( node && node.tagName !== 'TR' ) {
node = node.parentNode;
}
var i=node.rowIndex;
if(document.form1.selectItems[i-1].checked)
{
document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=false;
}
else
{
document.getElementById('mileage_' + document.form1.selectItems[i-1].value).value="";
document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=true;
}
}
现在,我知道为了添加或删除动态验证规则,我必须使用: addClass('required'); o removeClass('required') ,但我不知道如何检测是否选中复选框,并基于此启用或禁用该行的文本框。
我真的希望你能帮我解决这个问题。
把这个放进去<head>
或在一个.js
文件包含在<head>
.
$(document).ready(function() {
$("input[name=selectItems]").change(function() {
$(this).closest("tr").find("input[name^=mileage]").attr("disabled", !this.checked);
});
});
这是现场演示.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)