在多种情况下在下拉菜单中选择一个选项启用文本框

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'之外的其他选项，则文本框会再次被禁用。