JQuery - включить раскрывающийся список строк таблицы при установленном флажке

Question

У меня есть таблица с флажком и раскрывающимся списком в каждой строке.Я бы хотел, чтобы раскрывающиеся поля ввода были отключены при загрузке страницы, НО стал активным, когда установлен флажок для этой конкретной строки.

Можете ли вы помочь мне с кодом 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');
     }
  });

});

Вам на самом деле не нужна первая часть, потому что вы можете установить начальное значение disabled в своем HTML.

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

посмотрите на эту скрипку

, она использует простую функцию javascript для переключения раскрывающегося списка, когда вы нажимаете флажок.