How to check if a checkbox in a checkbox array is checked with jquery
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.
I already have the function to enable and disable the text boxes (column mileage) whe开发者_如何学Pythonn the user clicks on the corresponding checkbox, but it is written in javascript.However, for some reason it only works in IE).
Here is the html code
<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>
And the javascript code:
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;
}
}
Now, I know that in order to add or remove dynamically validation rules I have to use: addClass('required'); o removeClass('required') ,but I don't know how to detect whether a check box is selected or not, and based on that ,enable or disable the text box for that row.
I really hope you can help me out with this.
Put this in <head> or in a .js file which is included in <head>.
$(document).ready(function() {
$("input[name=selectItems]").change(function() {
$(this).closest("tr").find("input[name^=mileage]").attr("disabled", !this.checked);
});
});
Here's a live demo.
To check if a checkbox is checked or not in jquery you would do $('#CHECKBOX_ID').is(':checked') that will return a boolean you can use in an if statement
Add an id to the checkbox, call the checkbox through the id, then check for the boolean value of the checkbox.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input id="sam" type="checkbox" name="vehicle" value="Bike" />
</body>
</html>
This will return true/false
$('#sam').is(':checked')
Something like this should work:
$("input[name='selectItems']").change(function() {
var $el = $(this);
if(this.checked) {
// checkbox checked.
$el.parents("tr").find("input[name^='mileage_']").atrr("enabled", "enabled");
} else if(!this.checked) {
// checkbox NOT checked.
$el.parents("tr").find("input[name^='mileage_']").atrr("disabled", "disabled");
}
});
加载中,请稍侯......
精彩评论