JQuery - Aktivieren Sie die Dropdown-Liste der Tabellenzeile, wenn das Kontrollkästchen aktiviert ist

Question

Ich habe eine Tabelle mit Kontrollkästchen und einem Dropdown-Menü in jeder Zeile. Ich möchte, dass die Dropdown-Eingabefelder beim Laden der Seite deaktiviert werden, aber aktiviert werden, wenn das Kontrollkästchen für diese bestimmte Zeile aktiviert ist.

Können Sie mir mit JQuery Code helfen, der das tun kann?

<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 

Vielen Dank für Ihre Hilfe.

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

}); 

Sie nicht wirklich müssen den ersten Teil, weil Sie den ersten disabled Wert in Ihrem HTML festlegen.

Answer 2

Blick auf diesen fiddle

verwendet es einfach JavaScript-Funktion des Drop-down zu wechseln, wenn u Kontrollkästchen klicken.

Answer 3

Verwendung Nach jquery für diese.

$(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"); 
     } 
    }); 

}); 

Siehe diesen Link für Demo: http://jsfiddle.net/nEGTv/15/