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. alt text
I already have the function to enable and disable the text boxes (column mileage) when 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.
-
1why did you delete your other question? It was a valid question, so you might want to undelete it: stackoverflow.com/questions/4523127/…Bozho– Bozho2010年12月24日 21:42:48 +00:00Commented Dec 24, 2010 at 21:42
4 Answers 4
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);
});
});
10 Comments
onchange function as well?.checked on a jQuery object instead of the "raw" DOM object.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
Comments
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')
4 Comments
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");
}
});