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

我對此有一個問題，我想通過選中與選擇元素對應的複選框來啓用select元素。我怎樣才能做到這一點？使用javascript找到下一個特定元素？

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

來源

2012-07-25 avien

你可以試試這個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做循環

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

到

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

來源

2012-07-25 07:00:36

雖然我不喜歡使用事件屬性，但它還不錯，乾淨的回答。 – Christoph 2012-07-25 07:28:48

-1

您可以通過以下onchange事件添加到複選框：

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

，然後用這段JavaScript代碼，以使同一行中選擇框作爲複選框

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

來源

2012-07-25 06:35:26 Vishal

你看不到任何jQuery的標籤？ – Christoph 2012-07-25 06:36:33

不，但是如果@avien使用jQuery來實現這一點，會更容易。你不能讀第一行嗎？這只是一個建議。 – Vishal 2012-07-25 06:37:25

@Christoph - 有一個JavaScript標籤，所以我不明白爲什麼Javascript解決方案不合適。 – Spudley 2012-07-25 06:38:37

在普通的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的合適的跨瀏覽器替換。

來源

2012-07-25 06:53:31 jfriend00

儘管'row.getElementsByTagName（「select」）[0]'可能是未定義的， – Christoph 2012-07-25 07:29:44

@Christoph - 取決於OP的HTML。只有在複選框沒有匹配的'select'元素時纔會定義。 – jfriend00 2012-07-25 15:07:09

其他你的答案基於給在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) 
}

因此，要獲得選擇元素，聽者會是這樣的：

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

來源

2012-07-25 07:15:23 RobG

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

回答

相關問題