0

假设情况：

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

假设字段 1 是一个包含 3 个值的下拉列表：“A”、“B”、“C”

我如何使用 HTML/JavaScript 来表示：

如果用户选择“A”，则只有字段 2、3、4 可编辑（其余字段不可编辑）

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

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

谢谢！

4

2 回答 2

0 
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

于 2013-08-16T00:19:33.123 回答
0

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

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

更多信息请访问： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

于 2013-08-15T23:59:19.320 回答