启用禁用下拉列表和提交按钮

Question

我试图开发一个Web应用程序需要的东西，如文本框，以这样的方式验证该页面加载时我将有一个下拉启用选择框，休息，按钮所有应该处于禁用模式。当我从第一个选择框中选择项目时，只有另一个文本框应该启用。

我与选择的所有字段完成后，则仅提交按钮应该启用。

请建议我在JavaScript的方式或提供任何代码片段，这样我可以高效地设计。

Answer 1

好每一个选择框具有触发功能，并在该功能你可以写，使您的文本框和其他任何事情，你想

<select onchange = 'func();'></select> 

后的文本框中具有onkeypress事件ATTR时会触发onchange属性在该功能你可以写使能透过按钮

<input type='text' onkeypress="func();"/> 

在此功能中，您可以检查所有文本框是否填充或不比你可以使你的提交按钮..

Answer 2

你必须尝试使用​​jQuery，示例代码如下，其测试过。

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function(){ 

     $("#xyz").change(function(){ 
      var fields = $("input"); 
      fields.removeAttr("disabled");   
     }); 

    }); 

</script> 


<form action=""> 

    <select name="xyz" id="xyz"> 
     <option value="">Select</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 

    <input type="text" disabled="disabled"/> 
    <input type="text" disabled="disabled"/> 

</form>

随意问。

Answer 3

让我们先选择列表值映射到了需要启用的字段。您可以使用类，以便一次启用多个字段。

var choiceFieldMapping = { 
    'val1': '.first', 
    'val2': '.second', 
    // and so on 
}; 

我们还需要知道哪些值已选择：

var selectedValues = { 
    'val1': false, 
    'val2': false, 
    // and so on, all false by default 
}; 

接下来我们禁用所有输入和启用选择：

function resetDisable() { 
    $('form :input').prop('disabled', true); 
    $('form #firstSelect').prop('disabled', false); 
} 
resetDisable(); // Call it once to reset the form to initial state 

当用户更改所选的选项，我们做到这一点：

$('form #firstSelect').change(function() { 
    // Current value 
    var v = $(this).val(); 

    // Enable the fields 
    resetDisable(); 
    $(choiceFieldMapping[v]).prop('disabled', false); 

    // Update the selectedValues object 
    selectedvalues[v] = true; 

    // Check if all values have been selected 
    var allSelected = Object.keys(selectedValues).every(function(key) { 
     return selectedValues[key]; 
    }); 

    if (allSelected) { 
     // Enable submit button 
     $('form #submit').prop('disabled', false); 
    } 
});