如何根據下拉選擇取消某些HTML輸入字段？

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