啓用禁用下拉列表和提交按鈕

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); 
    } 
});