Question

当HTML表单中的某些元素最初被禁用但后来启用并且其值发生变化时，如果用户单击表单的重置按钮，这些元素的值将恢复为其初始值，但它们仍然会启用他们最初是残疾人。为什么会如此，如何确保表单重置会重置那些要禁用的元素？

此处的代码示例：

<html>
<head>
<script>
function enableDisable()
{
    var combo1 = document.getElementById("a");
    var combo2 = document.getElementById("b");
    if (combo1.value == 1)
        combo2.disabled = true;
    else
        combo2.disabled = false;
}
</script>
</head>
<body>
<form name="form" action="dummy">
    <select id="a" onchange="enableDisable();">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select disabled id="b">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="submit" value="submit" />
    <input type="reset" value="reset" />
</form>
</body>
</html>

Answer 1

reset()方法仅恢复表单元素的默认值，不会更改禁用状态。

在此处阅读一些文档https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset

我建议您需要编写自己的重置方法，调用HTMLFormElement.reset()，然后重置禁用状态。

e.g。

新的JavaScript代码：

var hardReset = function(){    
    document.forms["form"].reset();
    document.getElementById("b").setAttribute("disabled","disabled");    
};

新HTML：

<input type="button" value="reset" onclick="hardReset();" />

请参阅jsFiddle

的更新

Answer 2

表单元素的disabled状态与其他仅表单属性（如pattern，required等）一样，不是表单输入数据的一部分，这是表单的唯一方面。复位方法影响的表单状态。

我反过来遇到了类似的问题，并决定构建一个工具来保存DOM元素的状态以便随意恢复它们，从而保持DOM'版本化'。

它被称为jQuery插件，名为reverter，可以帮助你：

$( function form(){
    // Save state on load
    var initial = $( 'form *' ).commit( { attributes : 'disabled' } );

    $( 'form' ).on( 'reset', function(){
        // Revert it on reset!
        $( 'form *' ).revert( { changeset : initial } );
    } );
} );

HTML表单重置不会还原已禁用的属性

2 个答案: