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

谢谢你的帮助。

来源

2012-03-31 elfuego1

$(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值。

来源

2012-03-31 07:00:16 hohner

确实如此，没有必要对第一部分 – 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

看看这个fiddle

它使用简单的JavaScript函数来切换下拉当u点击复选框。

来源

2012-03-31 07:02:55

如果您动态更新您的DOM，这将无法正常工作，因为您依赖于该元素的内联'onclick（）'功能（无论如何，这在我看来并不是最佳实践）。 – hohner 2012-03-31 07:12:58

是的。但它具有灵活性，您可以在不依赖于类属性的情况下使用它。 – 2012-03-31 07:32:11

您不必依赖类属性。你可以使用任何你想要的选择器... – hohner 2012-03-31 07:36:37

使用以下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/

来源

2012-03-31 08:01:45

几乎在那里;-)如果我检查第一行，然后第二行，第三行等，然后取消它们的顺序第一，第二等...，只有最后一个将返回下拉到禁用状态。有任何想法吗？ – elfuego1 2012-03-31 08:17:38

按照你说我有更新我的代码，并显示在jsfiddle链接也 – 2012-03-31 09:19:48

JQuery-启用表格行下拉选中复选框

回答

相关问题