Question

我有一个问题，我想通过选中与行中的select元素对应的复选框来启用select元素。我怎么能这样做？

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

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

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

使用javascript找到下一个特定元素？

4 个答案: