Question

我有一个带复选框的表格，每行都有一个下拉列表。我希望在页面加载时禁用下拉输入字段当选中该特定行的复选框时，BUT变为启用状态。

你能帮我解决那些能做到这一点的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

感谢您的帮助。

Answer 1

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

Answer 2

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

Answer 3

查看此fiddle

它使用简单的javascript函数在你点击复选框时切换下拉列表。

JQuery - 选中复选框上的表行下拉列表

3 个答案: