JQuery-启用表格行下拉选中复选框
问题描述:
我有一个表格,每行都有复选框和下拉菜单。我希望在页面加载时禁用下拉输入字段,但是在检查该特定行的复选框时启用了BUT。JQuery-启用表格行下拉选中复选框
你能帮我使用JQuery代码吗?
<thead>
<tr>
<th>Box</th><th>No</th><th>No 1</th><th>No 2</th><th>No 3</th><th>No 4</th><th>Chosen</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ID[]" value="341"/></td><td>1</td><td>1</td><td>5</td><td>13</td><td class='key'><select name="chosen_key">
<option value="1" selected="selected">N</option>
<option value="2">Y</option>
<option value="3">M</option>
<option value="4">A</option>
<option value="5">R</option>
</select></td><td>2011-01-28</td></tr>
<tr>
<td><input type="checkbox" name="ID[]" value="342"/></td><td>2</td><td>6</td><td>10</td><td>23</td><td class='key'><select name="chosen_key">
<option value="1">N</option>
<option value="2" selected="selected">Y</option>
<option value="3">M</option>
<option value="4">A</option>
<option value="5">R</option>
</select></td><td>2011-01-28</td></tr>
.
.
.
</tbody>
> Blockquote
谢谢你的帮助。
答
$(document).ready(function() {
// Disable select elements
$('select').each(function() {
$(this).attr('disabled','true');
});
// Enable them on click
$('input[type=checkbox]').click(function() {
var s = $(this).parent('td').siblings('td.key').children('select');
if(s.is(':disabled')) {
s.removeAttr('disabled');
} else {
s.attr('disabled','true');
}
});
});
你不是真的需要的第一部分,因为你可以设置你的HTML初始disabled
值。
答
使用以下jquery为此。
$(document).ready(function() {
// Disable select elements
$('select').each(function() {
$(this).attr("disabled","disabled");
});
// Enable them on click
$("input[type=checkbox]").click(function(){
if($(this).closest("tr").find("td").children("input[type=checkbox]").prop("checked"))
{
$(this).closest("tr").find("td").children("select").removeAttr("disabled");
}
else
{
$(this).closest("tr").find("td").children("select").attr("disabled","disabled");
}
});
});
请参阅此链接演示:http://jsfiddle.net/nEGTv/15/
+0
几乎在那里;-)如果我检查第一行,然后第二行,第三行等,然后取消它们的顺序第一,第二等...,只有最后一个将返回下拉到禁用状态。有任何想法吗? – elfuego1 2012-03-31 08:17:38
+0
按照你说我有更新我的代码,并显示在jsfiddle链接也 – 2012-03-31 09:19:48
确实如此,没有必要对第一部分 – 2012-03-31 07:08:50
您可以检查此版本?因为它不适用于点击。 – elfuego1 2012-03-31 07:52:46
现在正在工作。我更新了@ mashit的[jsFiddle](http://jsfiddle.net/6KnBT/26/),如果你想在行动中看到它 – hohner 2012-03-31 08:32:13