javascript - 启用禁用下拉菜单和提交按钮

Question

我正在尝试开发一个需要验证的网络应用程序，当页面加载时，我将启用一个下拉选择框，其余的东西，如文本框，按钮都应该处于禁用模式。当我从第一个选择框中选择项目时，只有另一个文本框应该启用。

在我选择完所有字段后，只应启用提交按钮。

请建议我使用 javascript 的方式或提供任何代码片段，以便我可以有效地设计。

Answer 1

好的，每个选择框都有 onchange 属性，它会触发一个函数，在该函数中你可以编写来启用你的文本框和你想要的任何东西

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

之后文本框有 onkeypress attr 这将触发功能，您可以编写以启用 sumbit 按钮

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