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-啓用表格行下拉選中複選框

回答

相關問題