Question

假设情况：

我有一个包含11个字段的表单，字段1到11.

假设字段1是下拉列表，其中包含3个值：“A”，“B”，“C”

如何使用HTML / JavaScript表示：

如果用户选择“A”，那么只有字段2,3,4是可编辑的（其余字段不是）

如果用户选择“B”，则只有字段5,6,7,8可编辑（其余字段不可编辑）

如果用户选择“C”，那么只有字段9,10,11是可编辑的（其余字段不是。

谢谢！

Answer 1

您可以在javascript中处理元素并执行以下操作：

document.getElementById(' ... ').disabled = true;

更多信息可在以下网址找到： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Answer 2

var selectControl = [['input1', 'input2', 'input3'],
                 ['input4', 'input5', 'input6', 'input7'],
                 ['input8', 'input9', 'input10', 'input11']];

var FormControl = {
init: function () {
    var myform = document.getElementById("myform");
    var myselect = myform.getElementsByTagName('select')[0];
    var defaultOption = myselect.value;

    myselect.addEventListener('change', FormControl.changeSelect, false );

    // first load
    FormControl.changeFields( defaultOption );
},

changeSelect: function ( event ) {
    var option = this.value;

    FormControl.changeFields ( option );
},

disableAllInputs: function ( ) {
    var myform = document.getElementById("myform");
    var inputs = myform.getElementsByTagName("input");

    for ( var i = 0; i < inputs.length; i++ ) 
        inputs[i].disabled = true;
},

changeFields: function ( optionSelected ) {
    var enableInputs = selectControl[optionSelected];

    // disable everything
    FormControl.disableAllInputs();

    // enable only the ones selected
    for ( var i = 0; i < enableInputs.length; i++ ) 
        document.getElementById( enableInputs[i]).disabled = false;
}
};

FormControl.init();

jsFiddle

如何根据下拉选择来抑制某些HTML输入字段？

2 个答案: