I have a problem on this, i want to enabled the select element by checking the check box that correspond the select element in a row. how can i do that?
<table>
<?php do { ?>
<tr>
<td><input type="checkbox" /></td>
<td>
<select disabled="disabled">
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
</td>
</tr>
<?php } while($row = mysql_fetch_assoc($result)); ?>
</table>
You can try this is Javascript like create a function like
function CheckMe(field)
{
var tr = field.parentNode.parentNode;
var select = tr.getElementsByTagName("select");
if(select.length>0)
{
if(field.checked)
{
select[0].removeAttribute("disable");
}
else
{
select[0].setAttribute("disable", "disable")
}
}
}
and change in you php do loop
<td><input type="checkbox" /></td>
to
<td><input type="checkbox" onclick="CheckMe(this)" /></td>
In plain javascript, this code will enable the select list in the same row when the checkbox is checked and disable it when it is unchecked:
var table = document.getElementById("myTable");
var checkboxes = table.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("click", function() {
var row = this.parentNode.parentNode;
var select = row.getElementsByTagName("select")[0];
if (this.checked) {
select.removeAttribute("disabled");
} else {
select.setAttribute("disabled", "disabled");
}
}, false);
}
Working demo: http://jsfiddle.net/jfriend00/w8ZUj/
FYI - this uses addEventListener which is not supported in older versions of IE. A suitable cross browser replacement that substitutes addEvent in IE can be used if older versions of IE must be supported.
Others have given you answers based on parentNode, however a more general solution can be used with a simlpe upTo function, e.g.
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
var el;
do {
el = el.parentNode;
if (el.tagName.toLowerCase() == tagName) {
return el;
}
} while (el.parentNode)
}
So to get the select element, the listener would be something like:
<input type="checkbox" onclick="doSelect(this);">
where doSelect is:
function doSelect(el) {
var sel;
var row = upTo(el, 'tr');
if (row) {
sel = row.getElementsByTagName('select')[0];
}
if (sel) {
sel.disabled = !el.checked;
}
}
You can add onchange event to the checkbox as follows:
<input type="checkbox" onchange="enableSelect(this)" />
and then use this javascript code to enable the selectbox in the same row as the checkbox
function enableSelect(checkbox) {
var selectElements = checkbox.parentNode.parentNode.getElementsByTagName("select");
selectElements[0].disabled = !checkbox.checked;
}
