如何使用checkox在陣列中每行啓用/禁用文本框

Question

如何在複選框被選中時禁用文本框，並在複選框沒有對陣列中的每個表的行進行檢查時啓用該文本​​框。

這是我的代碼。

<tr> 
<td colspan="1" width=""><?php echo $item_name;?></td> 
<td colspan="" width="15%" ><input type="checkbox" name="check_approved[]" value="Checked"></td> 
<td colspan="" width="10%" ><input type="text" class="form-control" name="remarks[]" required></td> 
</tr> 

Answer 1

您可以輕鬆地遍歷家長髮現孩子不改變你的表單html中已經有的東西。

的jsfiddle：https://jsfiddle.net/9cgntpzf/

$(document).ready(function(){ 
    // This will listen for changes on the checkbox 
    $("input[name=check_approved\\[\\]]").on('change',function(){ 
     // This will then traverse upwards to the "tr", then find from the children 
     // the corresponding "remarks" input 
     var remarks = $(this).parents('tr').find('input[name=remarks\\[\\]]'); 
     // This enables or disables the text box 
     remarks.attr('disabled',$(this).is(':checked')); 
}); 

一個說明，我是你的例子是很多的表的一個假設下，這就是爲什麼我給解決問題的一般方法。如果您的網頁上只有一個實例，則使用獨特的id將是更直接的方法。

Answer 2

給類和ID屬性到他們兩個，然後隱藏顯示基於所檢查未選中狀態的文本。

試試下面的代碼：

這是你的HTML：

<td colspan="" width="15%" ><input type="checkbox" class=".txtcheck" name="check_approved[]" value="Checked"></td> 

<td colspan="" width="10%" ><input type="text" class="form-control" id="txtbox" name="remarks[]" required></td> 

這是你的js代碼：

<script type="text/javascript"> 
function valueChanged() 
{ 
    if($('.txtcheck').is(":checked")) 
     $(".txtbox").show(); 
    else 
     $(".txtbox").hide(); 
} 
</script>