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

启用禁用下拉菜单并提交按钮

3 个答案: