在多種情況下在下拉菜單中選擇一個選項啓用文本框

Question

我想要的是，只有從下拉菜單中選擇某個選項才能訪問該文本框，並且我有如下的html表單：

<tr> 
    <td>a.&nbsp;Did any of your staff participate in training or orientation sessions related to any aspect of social performance management, during the reporting year? 
    <td > 
     <select name="mfi_4_a_i"> 
      <option>Please choose one.</option> 
      <option>Yes</option> 
      <option>No</option> 
      <option>No, but planning in future</option> 
     </select> 

     <p>if not,and not planning please explain why not?</p> 

     <input type="text" name="mfi_4_a_ii" class="init" disabled="disabled"/> 
</tr> 

現在，當在未來選擇否，但計劃被選中，那麼該文本必須是enabled.This下拉菜單的類型以這種形式已經被多次使用，所以我必須啓用另一個類似的情況下，文本框所以如何寫一個單一的函數來做到這一點。幫我解決問題。

Answer 1

首先，您應該在內容末尾添加</td>以關閉您的td。如果你使用javascript，那麼瀏覽器將會很少找到正確的元素。

此外，您需要將value s添加到option s，以便表單處理程序知道哪個已被選中。你可以使用類似的東西：

<select name="mfi_4_a_i"> 
    <option>Please choose one.</option> 
    <option value="yes">Yes</option> 
    <option value="no">No</option> 
    <option value="later">No, but planning in future</option> 
</select> 

你可以留下第一個空白，因爲他們必須選擇別的東西。

關於文本框，您必須使用javascript。你碰巧使用jQuery？這樣可以更輕鬆地處理這些問題，特別是在重複使用它的情況下。它也可以用普通的javascript來完成，但我不確定它的代碼。下面是jQuery的解決方案：

$('select').change(function(){ 
    $input = $(this).parent().find('input'); 

    if($(this).attr('value') == 'later') { 
     $input.removeAttr('disabled'); 
     $input.focus(); 
    } else { 
     $input.attr('disabled','true'); 
    } 
}); 

這樣做什麼：每次一select下拉變化值（事情已經回升），它會檢查與價值later選項是否被選中（也許「指定」會比較合適.. ）。如果這是真的，它會發現與select相同的元素內的第一個文本框。在這種情況下，兩者在td處於同一級別，如果您的html變得更復雜，也許您必須找到另一種方法來查找最近的文本框。 如果找到輸入，則將其設置爲啓用，並將光標放在裏面，以便他們可以立即開始輸入。

如果選擇了'later'之外的其他選項，則文本框會再次被禁用。