php - 使用 javascript 查找下一个特定元素？

Question

我对此有疑问，我想通过选中与一行中的选择元素对应的复选框来启用选择元素。我怎样才能做到这一点？

<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>

Answer 1

你可以试试这是 Javascript 之类的创建一个函数

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")  
        }
    }
}

并改变你的 php do loop

<td><input type="checkbox" /></td>

到

<td><input type="checkbox" onclick="CheckMe(this)" /></td>

Answer 2

在纯javascript中，此代码将在选中复选框时启用同一行中的选择列表，并在未选中时禁用它：

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);
}​

工作演示：http: //jsfiddle.net/jfriend00/w8ZUj/

addEventListener仅供参考 -旧版本的 IE 不支持此用途。addEvent如果必须支持旧版本的 IE，则可以使用在 IE 中替代的合适的跨浏览器替换。

Answer 3

其他人已经根据 parentNode 给了你答案，但是更通用的解决方案可以与 simlpe upTo函数一起使用，例如

function upTo(el, tagName) {
  tagName = tagName.toLowerCase();
  var el;
  do {
    el = el.parentNode;
    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  } while (el.parentNode)
}

因此，要获取 select 元素，侦听器将类似于：

<input type="checkbox" onclick="doSelect(this);">

其中doSelect是：

function doSelect(el) {
  var sel;
  var row = upTo(el, 'tr');

  if (row) {
    sel = row.getElementsByTagName('select')[0];
  }

  if (sel) {
    sel.disabled = !el.checked;
  }
}

Answer 4

您可以将 onchange 事件添加到复选框，如下所示：

<input type="checkbox" onchange="enableSelect(this)" />

然后使用此javascript代码启用与复选框在同一行中的选择框

function enableSelect(checkbox) {
    var selectElements = checkbox.parentNode.parentNode.getElementsByTagName("select");
    selectElements[0].disabled = !checkbox.checked;
}